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 动画名{}
设置动画不同帧数是的样式状态。配合动画名使用。