css3的animation动画

animation

设置对象的动画特效

 

有6个主要的值

animation-name   动画名称

animation-duration   动画持续时间

animation-timing-function    动画过渡类型

     linear:线性过渡

     ease:平滑过渡

     ease-in:由慢到快

     ease-out:由快到慢

     ease-in-out:由慢到快再到慢

animation-delay   动画延迟时间

animation-iteration-count   动画的循环次数

infinite:无限循环

<number>:指定对象动画的具体循环次数

animation-direction   动画在循环中是否反向运动 

normal :  正常方向（默认值）

reverse : 反方向运行

alternate : 先正常运行再反向运行，并持续交替运行

alternate-reverse : 动画先反运行再正方向运行，并持续交替运行

animation-fill-mode    设置对象动画时间之外的状态

none :  默认值，不设置对象动画之外的状态

forwards : 设置对象状态为动画结束时的状态

backwards : 设置动画状态为动画开始时的状态

both : 设置对象状态为动画开始或结束时的状态 

@-webkit-keyframes animation_name{

     0%{-webkit-transform:scale(0);opacity:0;}

     20%{-webkit-transform:scale(1);opacity:1; }

     50%{-webkit-transform:scale(1.2);opacity:1; }

     100%{-webkit-transform:scale(1);opacity:0; }

}

@keyframes 动画名{}

设置动画不同帧数是的样式状态。配合动画名使用。