动画( animation )

1. 什么是动画

使得元素从一种样式逐渐变化为另一种样式的过程

• 动画是复杂的过渡
• 动画是通过 "关键帧" 来控制每个步骤
  • 关键帧: 由时间 和 动作来组成

2. 动画的使用步骤

2.1. 声明动画

1. 为动画定义名称
2. 定义动画的所有关键帧

3. 声明动画的语法

• 通过 @keyframes 的规则来声明动画

• @keyframes 名称{
  	/* 声明 若干 关键帧( 时间: 动作( 样式 ) ) */
    0% | from{
      /* 动画开始时的动作( 样式 ) */
    }
    25%{
      /* 动画运行到 1/4 时的动作( 样式 ) */
    }
    100% | to{
      /* 动画结束时的动作( 样式 ) */
    }
  }
  

• 兼容性: 1. @-webkit-keyframes 名称{}

  2. @-moz-keyframes 名称{}
  3. @-o-keyframes 名称{}
  4. @-ms-keyframs 名称{}

4. 调用动画的语法

1. animation-name: 指定当前元素动用动画的名称
2. animation-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: name duration timing-function delay iteration-count direction
8. animation-fill-mode: 指定动画执行前后的填充模式
   • 取值: 1. none: 默认行为 2. forwards: 动画执行完成后, 保持在最后一帧的状态上 3. backwards: 动画执行前( 延迟时间内 ), 保持在第一帧的状态上 4. both: 动画执行前后分别保持在第一帧 最后一帧的状态上
9. animation-play-state: 指定动画的播放状态( 暂停 | 播放 )
   • paused: 动画暂停
   • running: 动画播放

2. 动画例子

/* 定义动画 */
@keyframes scroll{
  0%{
    background: #f00; margin-left: 0;
    margin-top: 0; border-radius: 0;
  }
  25%{
    background: #ff0; margin-left: 500px;
    margin-top: 0; border-radius: 0;
  }
  50%{
    background: #00f; margin-left: 500px;
    margin-top: 500px; border-redius: 50%;
  }
  75%{
    background: #f00; margin-left: 0;
    margin-top: 500px; border-radius: 50%;
  }
  100%{
    background: #f00; margin-left: 0;
    margin-top: 0; border-radius: 0;
  }
}
#d1{
  width: 100px; height: 100px;
  border: 1px solid #f00;
  /* 网页加载时就执行动画, 在此调用 */
  animation: scroll 5s linear 2s infinite;
  /* 指定填充模式 */
  animation-fill-mode: backwards;
}
#d1:hover{
  animation-play-state: paused;
}