CSS3 动画animation 清晰

动画 animation

// animation:调用动画
- 必填的属性：动画的名字(参数1) + 动画的持续时间(参数2)
- 两个时间：第一个时间是持续时间，第二个时间是延时

// 动画的优点
- 可以主动执行（一刷新就动起来）
- 可以无限执行，永远一直运行下去
- 可以设置多个状态的样式不同

//  实现动画的两步： 

  // 第一步：声明动画（创建动画序列）
       @keyframes 自定义动画名 {
   			 from {
     		     开始状态的样式
  			  }
   			 to {
    		     结束状态的样式
    		  }
		   }
       // 或者声明动画的第二种写法 => 百分比模式
           @keyframes bian {
                0% {
                    width: 200px;
                    height: 200px;
                }
                50% {
                    width: 600px;
                    height: 200px;
                }
                100% {
                    width: 600px;
                    height: 600px;
                }
            }
// 第二步：调用动画（指定让哪个元素添加动画）
              .box {
                   animation: 动画名 动画执行的时间 ...
                }
                   
                示例: .box{
                    animation: l_b 8s linear infinite;
                }
                   @keyframes l_b {
                    0% {
                      top: 0;
                    }
                    25% {
                      top: 100px;
                    }
                    50% {
                      top: 300px;
                    }
                    75% {
                      top: 100px;
                    }
                    100% {
                      top: 0;
                    }
                  }

动画animation的其他参数

/* 
使用动画相关的属性：
1、动画的名字：animation-name------------------------------------
*/
animation-name: big;

/* 
2、动画的持续时间（一次动画持续的时间）：animation-duration------------------------------------
*/
animation-duration: 1s;

/* 
3、动画的延时：animation-delay------------------------------------
*/
animation-delay: 1s;

/* 
4、动画的效果：animation-timing-function------------------------------------
取值：
1、ease：先慢——》再快——》再慢
2、linear：匀速
3、steps()：分步进行
*/
animation-timing-function: linear;

/* 
5、动画的执行次数：animation-iteration-count------------------------------------
取值：
1、次数（默认是1次）
2、infinite：无限次

*/
animation-iteration-count: infinite;

/* 
6、指定动画的方向（按照什么顺序执行）：animation-direction------------------------------------
取值：
1、normal：正常（从from——》to）
2、reverse：反转（从to——》from）
3、alternate：交替（from——》to——》from——》to——》from....）
*/
animation-direction: alternate;

/* 
7、动画结束的状态：animation-fill-mode------------------------------------
取值：
1、backwards：（默认值）回到开始状态结束
2、forwards：动画在结束状态结束
*/
animation-fill-mode: forwards;

/* 
8、动画执行的状态：animation-play-state------------------------------------
取值：
1、running：默认执行
2、paused：暂停动画（一般给hover状态加，让鼠标移入之后暂停动画）
*/
animation-play-state: paused;



// 注意 => 一般使用动画用的都是animation的连写形式
// 示例 => animation: l_b 8s linear infinite;