css3的 关键帧动画

标签：

 关键帧动画：

关键帧：动画执行过程中，物体在某一位置上的特殊状态
关键帧动画：使用连续的关键帧，控制物体连续的状态变化
何时使用关键帧动画：
连续，有规律的过渡——过渡transition
无规律的连续变化——动画animation
如何实现：2步：
1. 定义关键帧：
@keyframes 动画名{
from{开始样式}
n%{当动画进度播放到n%时的样式}
...
to{结束样式}
}
2. 触发动画：
animation:动画名 持续时间 速度类型
如何使用：写在非伪类的选择器，页面加载后自动触发
写在伪类中，伪类触发时才播放

浏览器兼容性：@keyframes animation Firefox IE
@-webkit-keyframes -webkit-animation Chrome Safari
@-o-keyframes -o-animation Opera

*使动画维持最后一帧状态：animation后+forwards*
*循环播放：infinite*
*交替往返播放：alternate
单数次正向播放
双数次逆向回来*
如何暂停动画：animation-play-state:paused
使用：加在正在播放动画的元素的伪类上

易度（深圳）传媒有限公司

看世界 新角度

微信：EDOYOJOY

微博：http://weibo.com/EDOYOJOY

官网：http://www.edovis.com/

css3的 关键帧动画

标签：

原文地址：http://www.cnblogs.com/EDOYOJOY/p/5750137.html