CSS3 animation动画

什么是 CSS3 中的动画？
动画是使元素从一种样式逐渐变化为另一种样式的效果，我们可以改变很多运行样式和很多运行次数。
动画属性：animation；
需配合关键帧@keyframes myfirst 一起使用
关键帧：@keyframes myfirst
需配合关键词 “from” 和 “to”，等同于 0% 和 100%

@keyframes name 
{
from {background: red;}
to {background: yellow;}

或者

@keyframes name
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

animation属性：
1.animation-name ：设置动画的名称
作用：绑定关键帧@keyframes形成映射关系，
例如
animation-name：move；
@keyframes move
{
from {background: red;}
to {background: yellow;
}
注；name名与关键帧名需一致，否则浏览器将检索不到关键帧，则关键帧无效。
2.animation-duration：设置动画执行一次的时长，（S）秒（MS）毫秒
例如
animation-duration；3s；
3. animation-delay：设置动画从何时开始（s）（ms）
例如
animation-delay：3s
动画延迟三秒开始
4.anmation-timing-function：设置动画的运行曲线
取值：liner：线性过度
ease：平滑过度（默认）
easein：由慢到快
ease-out：由快到慢
ease-in-out：先慢再快又再慢
step-start：马上跳动到每一帧结束状态
更多可前往曲线图网址：cubic-bezier.com
贝塞尔曲线网址
5.animation-iteration-count：设置播放循环次数
取值：infinite：无限次数
number：设置具体次数（1，2，3.。。。。。）
6.animation-direction：设置动画在循环中是否反向运动
取值：normal 正常方向（默认）
reverse 反向运动
alternat 先正向再反向，循环交替
alternat-reverse 先反向再正向，循环交替
7.animation-fill-mode：设置动画播放之前其效果是否可见
取值：none （默认值）在运动结束回到初始位置，有延迟的情况下，让0%在延迟后生效
backwards 在延迟的情况下，让延迟在0%前生效
forwardr 在运动结束后停到结束位置
both：backwards和forwars同时生效
8.animation-play-state：设置动画的状态
取值 running 运动（默认值）
paused 暂停
CSS3 @keyframes 浏览器支持
I E 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性，Chrome 和 Safari 需要前缀 -webkit-。
IE 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
例

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

animation复写方式
animation：move 3s ease-in-out 3s infinite alternate
第一个值：动画的名称
第二个值：动画持续的时间
第三个值：动画的运行曲线
第四个值：延迟播放的时间
第五个值：定义循环是无限循环
第六个值：定义动画的方式
注
动画持续时间和延迟播放时间不得换位置，否则不生效