animation（动画）设置

1、animation 动画

　　概念：当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

　　通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

• 规定动画的名称
• 规定动画的时长

把 "myMove" 动画捆绑到 div 元素，时长：5 秒;

1. 动画调用
2. 调用动画的规则名称
3. 动画持续的时间（可选）
4. 动画的过渡类型
5. 延迟时间
6. 动画播放次数（默认1次，也可以成数字或者infinite则是无限循环）
7. 是否停留在结束状态 forwards
8. 反向运动 alternate 1

2、调用形式如下所示：---------------可以互相组合使用

 -webkit-animation: myMove 2s ;
 -webkit-animation: myMove 2s linear 2s infinite ;无限循环
 -webkit-animation: myMove 2s linear 2s 2 ;循环2次
 -webkit-animation: myMove 2s linear 2s forwards ;停留在结束位置
 -webkit-animation: myMove 4s linear 2s infinite alternate ;反向运动不能在1次运动时实现，播放次数必须在2次或2次以上才可以实现

3、复杂的动画调用规则：

A、动画规则的设置：

 @-webkit-keyframes myMove {
 from{
 margin-left: 0px;
 background-color: orange;
 }to{
 margin-left: 200px;
 background-color: rosybrown;
 }
 }

B、动画规则的设置，用百分比实现

 @-webkit-keyframes myMove{

 0%{ width: 200px; }
 20%{ width: 200px; }
 40%{width: 200px; }
 60%{ width: 200px; }
 100%{ width: 200px; }
 }

4、暂停动画：

代码：animation-play-state: paused;

用途：用在轮播上，要借用hover属性来实现；表示鼠标移上去是动画停止，移出时动画继续

实例：

下面是调用动画：

 #boxhidden{
 border: 1px solid rosybrown;
 width: 320px;
 height: 213px;
 overflow: hidden;
 }

 #boximg{
 height: 213px;
 width: 1920px;
 font-size:;
 animation: imgmove 4s linear infinite;
 }
 #boximg:hover{
 animation-play-state: paused;
 }

动画规则设置：

 @-webkit-keyframes imgmove {
 0%{margin-left: 0px; }     10%{margin-left: -320px; }20%{ margin-left: -320px; }
 30%{ margin-left: -640px; }40%{margin-left: -640px; }50%{margin-left: -960px; }
 60%{ margin-left: -960px; }70%{margin-left: -1280px; }80%{margin-left: -1280px}
 90%{margin-left: -1600px} 100%{margin-left: -1600px}
 }