css3中的animation
CSS3的Animation有八个属性：
animation-name
运动的名称（规定需要绑定的keyframe 名称）
animation-duration
运动时间
animation-delay
运动延迟时间
animation-iteration-count
规定动画播放的次数（infinite表示无限次播放）
animation-direction
规定是否应该轮流反向播放动画。
（normal正常播放，默认值；
alternate：轮流反向播放；）
animation-play-state
规定动画正在运行还是暂停。
（paused：规定动画已暂停；
running：规定动画正在播放。）
animation-fill-mode
动画在播放之前或之后，其动画效果是否可见。
（none：不改变默认行为；
forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）；
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）；
both：向前和向后填充模式都被应用；）
animation-timing-function
规定动画的速度曲线
（linear：匀速；
ease：低速开始，加速，结束前变慢；
ease-in：加速；
ease-out：减速；
ease-in-out：低速开始和结束；
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值）。
用css3的animation完成一个动画，当只有这个动画完成时才执行另一个事件。有两种方法：
一、设置定时器：
设定一个和动画时长一样的time，过time事件去执行这个函数。
setTimeout(function(){ },time);
二、当-webkit-animation动画结束时有一个webkitAnimationEnd事件，只要监听这个事件就可以了。
不同浏览器的AnimationEnd写法 (webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend)
例子：
-webkit-animation动画其实有三个事件：
开始事件 webkitAnimationStart
结束事件 webkitAnimationEnd
重复运动事件 webkitAnimationIteration
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
list-style: none;
}
ul{
width: 0px;
height: 0px;
position: relative;
margin: 100px auto;
opacity: 0;
animation: 2s move ease;
}
li{
width: 50%;
height: 50%;
float: left;
border-radius: 0 80%;
}
li:nth-child(2){
transform: rotate(90deg);
}
li:nth-child(3){
transform: rotate(90deg);
}
ul.move{
width: 240px;
height: 240px;
opacity: 1;
animation: 1s rotate linear infinite;
}
@keyframes rotate{
to{
transform: rotate(360deg);
}
}
@keyframes move{
100%{
width: 240px;
height: 240px;
opacity: 1;
}
}
</style>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function(){
var oUl=document.querySelector('ul');
oUl.addEventListener('webkitAnimationEnd',function(){
oUl.classList.add('move');
},false);
},false);
</script>
</head>
<body>
<ul>
<li style="background: deeppink;"></li>
<li style="background: deepskyblue;"></li>
<li style="background: gold;"></li>
<li style="background: greenyellow;"></li>
</ul>
</body>
</html>
上一篇： 纯CSS3实现圆角效果
下一篇： PyQt小结