CSS自定义动画@keyframes的使用

CSS中有一种自定义动画样式：@keyframes，这可以在元素的animation中被引用，从而产生两种样式的过渡
@keyframes格式：

@keyframes ***{from{}to{}
}

***为用户自定义动画引用名
eg:
html:

<head><meta charset="utf-8"><link href="css/index.css" rel="stylesheet" /><title></title></head><body><div id="target"></div><button onclick="enlarge()">enlarge</button><button onclick="lessen()">lessen</button><button onclick="play()">play</button><button onclick="stop()">stop</button><script>function enlarge(){               document.getElementById("target").style="animation: myFrame 3s forwards;"}function lessen(){document.getElementById("target").style="animation: myFrame2 3s forwards;"}function play(){document.getElementById("target").style.webkitAnimationPlayState="running";}function stop(){document.getElementById("target").style.webkitAnimationPlayState="paused";}</script></body>

css:

@keyframes myFrame{from{transform: scale(1,1);}to{transform: scale(5,5);}
}
@keyframes myFrame2{from{transform: scale(5,5);}to{transform: scale(1,1);}
}
div{margin: 100px;width: 50px;height: 50px;background-color: orange;-webkit-user-select: none;
}

运行结果：

CSS自定义动画@keyframes的使用相关推荐

animate.css 自定义动画
在使用animate.css 的时候动画的高度超过了预期的高度在这种情况下肯定是过不了测试的,怎么办的? <div class="fold-div animated " ...
css自定义盒子形状及动画应用
css自定义盒子形状及动画应用 <style> clip-path: polygon(X1 Y1,X2 Y2,....) </style> 当我们写页面时对盒子的形状有需求时, ...
【CSS】自定义动画
CSS3动画动画(animation)是css3中具有颠覆性的特征之一,可以通过设置多个节点来精确控制一个或一组动画,常用于实现复杂的动画效果相比于过渡动画可以实现更多变换,更多控制,连续自动播放 ...
[HTML/CSS]动画效果以及自定义动画效果
一,实现div或者文字的当鼠标浮于其上时的动画效果: 1,transition加在div中,实现动画效果的过渡效果,transition: all 3s;其中all表示所有样式都参与过渡,3s表示实现 ...
css animation动画
css 动画: 动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果. 必要元素: a.通过@keyframes指定动画序列:自动补间动画,确定两 ...
1.CSS3 教程-＞多列布局＞ image模块＞ cssTransition 过渡＞ CSS Animations 动画＞ Transform二维
CSS3 教程多列布局 image模块 cssTransition 过渡 CSS Animations 动画 Transform二维介绍 CSS3 是层叠样式表(Cascading Style S ...
CSS3 自定义动画（animation）
除了在之前的文章中介绍过的 CSS3 的变形 (transformation) 和转换 (transition) 外,CSS3 还有一种自由度更大的自定义动画,开发者甚至可以使用变形(transfor ...
css情景动画,css3中的动画属性animation应用场景及编写代码教程
讲解一下css3中的动画属性animation应用场景及编写代码教程以下讨论的是和css3 动画属性 animation 相关的css3中的动画属性animation应用场景及编写代码教程教程文章 ...
百度地图添加自定义图标标注以及自定义动画效果
百度地图添加自定义图标标注以及自定义动画效果 1.添加自定义图标标注 2.添加自定义动画效果 2.1.标注对象marker的构成 2.2.自定义动画效果实现过程 2.3.最终实现效果上次写的是添加自 ...

CSS自定义动画@keyframes的使用

CSS自定义动画@keyframes的使用相关推荐

最新文章

热门文章