CSS 动画

动画
1、什么是动画
使元素从一种样式逐渐变化为另一种样式
其原理是通过 关键帧 控制动画的每一步

注意：浏览器兼容性
通过了浏览器前缀解决兼容性
-moz-
-webkit-
-o-
2、使用动画的步骤
1、声明动画
声明动画的名称，并且指定关键帧的信息
关键帧：
1、时间点
2、该时间点上的状态(样式)
2、使用动画
通过动画属性，将动画效果绑定到某个元素上
3、声明动画
语法
@keyframes 动画名称{
0%{
动画开始时元素的样式声明
}
… …(1% ~ 99%)
100%{
动画结束时元素的样式声明
}
}

兼容 Chrome Safari
@-webkit-keyframes 动画名称{
0%{
动画开始时元素的样式声明
}
… …(1% ~ 99%)
100%{
动画结束时元素的样式声明
}
}

兼容 Firefox
@-moz-keyframes 动画名称{
0%{
动画开始时元素的样式声明
}
… …(1% ~ 99%)
100%{
动画结束时元素的样式声明
}
}

时间点：
0%(from) : 动画开始的时候
50% : 动画运行到一半的时候
100%(to) : 动画结束的时候
4、动画的调用
1、animation-name
要调用的动画名称
2、aniamtion-duration
动画完成一个周期需要用的时间
以s 或 ms 为单位
3、animation-timing-function
动画的 速度时间 曲线函数

ease
		linear
		ease-in
		ease-out
		ease-in-out

4、animation-delay
动画执行延迟时间
s|ms为单位
5、animation-iteration-count
动画播放次数
取值：
1、具体数值
2、infinite
无限次播放
6、animation-direction
动画播放方向
取值：
1、normal
默认值，正向播放，即从 0%~100%
2、reverse
逆向播放，即从100% ~ 0%
3、alternate
轮流播放，动画在奇数次数播放时，从 0% ~ 100%,动画在偶数次数播放时，从100% ~ 0%
7、animation属性
animation:name duration timing-function delay iteration-count direction;
8、animation-fill-mode
动画播放前后的填充方式
取值：
1、none
默认值，不改变默认行为
2、forwards
动画完成后，将保持在最后一个关键帧的状态上
3、backwards
动画播放前(在延迟时间内)，将元素保持在第一个帧的状态上
4、both
动画播放前后的填充模式都应用
9、animation-play-state
动画的播放状态
取值：
1、paused
暂停
2、running
播放

eg:使用css3帧动画设计一个小方格，让其沿着方形框内匀速运动

代码如下：