CSS3新特性-CSS3动画 animation

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

相比较过渡，动画可以实现更多变化，更多操作，连续自动播放等效果。

• 步骤

  1. 先定义动画
  2. 再使用（调用）动画

• 基本使用

1. 用keyframe定义动画（类似定义类选择器）

   @keyframes 动画名称 {
     0% { 
           transform: translate(0, 0);
       }  
     100%{  
         transform: translate(1000px, 0);
       }  
   }
   

2. 使用动画

   div{
       width: 200px;
       height: 200px;
       background-color: yellowgreen;
       margin: 100px auto;
       /* 调用动画 */
       animation-name: 动画名称;
       /* 持续时间 */
       animation-duration: 持续时间;
   }
   

一、动画序列

• 说明

  1. 0%是动画的开始，100%是动画的完成。
  2. 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
  3. 可以做多个状态变化 ，通过改变任意多的样式任意多的次数
  4. 通常习惯用百分比来规定变化发生的时间，或用关键词“from”和“to”，等价于0%和100%。（里面的百分比要是整数，百分比就是总时间的划分）

• 示例

  @keyframes move {
      0% {
          transform: translate(0, 0);
      }
  
      25% {
          transform: translate(1000px, 0);
      }
  
      50% {
          transform: translate(1000px, 500px);
      }
  
      75% {
          transform: translate(0, 500px);
      }
  
      100% {
          transform: translate(0, 0);
      }
  }
  div {
      width: 100px;
      height: 100px;
      background-color: yellowgreen;
      /* 调用动画 */
      animation-name: move;
      /* 持续时间 */
      animation-duration: 5s;
    }
  
  

二、动画属性

• 常用动画属性

  属性	描述
  @keyframes	规定动画
  animation	简写方式
  animation-name	动画名称
  animation-duration	持续时间，默认是0
  animation-timing-function	规定运动曲线，ease、eas-in
  animation-delay	规定动画何时开始，默认是0
  animation-iteration-count	规定动画播放次数，默认是1，infinite无限循环播放
  animation-direction	动画是否轮流反向播放，默认normal，alternate反向
  animation-play-state	动画是否暂停，默认是running，暂停：paused
  animation-fill-mode	动画结束后状态，保持：forwards；回到起始：backwards

• 使用

  div:hover{
      animation-play-state:paused; 
  }
  

三、动画简写

• 语法格式

  animation:动画名称 持续时间 运动曲线  何时开始  播放次数  是否反方向 动画起始或者结束的状态;
  animation：move 7s linear  1s infinite alternate
  

  关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意

• 注意

  1. 简写不包括 animation-play-state:paused;

  2. 暂停动画经常和鼠标经过等其他配合使用的