css3动画
什么是css3动画？
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
浏览器兼容：
1）Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
2）Chrome 和 Safari 需要前缀 -webkit-。
3）Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
创建动画：
@keyframes 创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果
1） 关键词“from”“to”
/*定义一个动画集*/
/*@keyframes 动画集名字*/
@keyframes rotate{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
@-webkit-keyframes rotate{/*Safari和Chrome*/
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
2）百分比
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */ { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} }
动画属性：
animation：所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
取值：linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 速度曲线函数中自己的值。可能的值是从 0 到 1 的数值。
steps(n)逐步运动
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。（infinite无限次播放）
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-direction 属性定义是否应该轮流反向播放动画。
如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
注释：如果把动画设置为只播放一次，则该属性没有效果。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。（paused暂停）
animation-fill-mode 规定对象动画时间之外的状态（规定动画在播放之前或之后，其动画效果是否可见。）。
取值：forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both 向前和向后填充模式都被应用。
demo:
<style>
.box{
width:0;
height:0;
/*四个边框*/
border-left:100px dashed red;
border-top:100px dashed green;
border-right:100px dashed blue;
border-bottom:100px dashed orange;
border-radius: 50%;
/*使用动画集的名字*/
animation-name: rotate;
animation-duration: 2s;/*秒数*/
animation-iteration-count: 10;/*设置动画执行的次数*/
animation-timing-function: linear;/*匀速。设置速度的*/
animation-direction: alternate;/*动画逆播*/
animation-delay: 1s;/*延时*/
animation-fill-mode:forwards; /*动画结束了，保持最后一个属性值，但是不能是无限次播放*/
/*animation:rotate 2s 10 linear alternate 1s forwards;简写属性*/
}
.box:hover{
animation-play-state: paused;/*鼠标进入就停止了*/
}
/*定义一个动画集*/
/*@keyframes 动画集名字*/
@keyframes rotate{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
注意：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了
