1、animation 动画
概念：当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
- 规定动画的名称
- 规定动画的时长
把 "myMove" 动画捆绑到 div 元素，时长：5 秒;
- 动画调用
- 调用动画的规则名称
- 动画持续的时间（可选）
- 动画的过渡类型
- 延迟时间
- 动画播放次数（默认1次，也可以成数字或者infinite则是无限循环）
- 是否停留在结束状态 forwards
- 反向运动 alternate 1
2、调用形式如下所示：---------------可以互相组合使用
1 -webkit-animation: myMove 2s ; 2 -webkit-animation: myMove 2s linear 2s infinite ;无限循环 3 -webkit-animation: myMove 2s linear 2s 2 ;循环2次 4 -webkit-animation: myMove 2s linear 2s forwards ;停留在结束位置 5 -webkit-animation: myMove 4s linear 2s infinite alternate ;反向运动不能在1次运动时实现，播放次数必须在2次或2次以上才可以实现
3、复杂的动画调用规则：
A、动画规则的设置：
1 @-webkit-keyframes myMove { 2 from{ 3 margin-left: 0px; 4 background-color: orange; 5 }to{ 6 margin-left: 200px; 7 background-color: rosybrown; 8 } 9 }
B、动画规则的设置，用百分比实现
1 @-webkit-keyframes myMove{ 2 3 0%{ width: 200px; } 4 20%{ width: 200px; } 5 40%{width: 200px; } 6 60%{ width: 200px; } 7 100%{ width: 200px; } 8 }
4、暂停动画：
代码：animation-play-state: paused;
用途：用在轮播上，要借用hover属性来实现；表示鼠标移上去是动画停止，移出时动画继续
实例：
下面是调用动画：
1 #boxhidden{ 2 border: 1px solid rosybrown; 3 width: 320px; 4 height: 213px; 5 overflow: hidden; 7 } 9 #boximg{ 10 height: 213px; 11 width: 1920px; 12 font-size: 0; 13 animation: imgmove 4s linear infinite; 16 }
17 #boximg:hover{ 18 animation-play-state: paused; 19 }
动画规则设置：
1 @-webkit-keyframes imgmove { 2 0%{margin-left: 0px; } 10%{margin-left: -320px; }20%{ margin-left: -320px; } 3 30%{ margin-left: -640px; }40%{margin-left: -640px; }50%{margin-left: -960px; } 4 60%{ margin-left: -960px; }70%{margin-left: -1280px; }80%{margin-left: -1280px} 5 90%{margin-left: -1600px} 100%{margin-left: -1600px} 6 }