CSS动画详解

CSS动画详解

属性定义及使用说明

CSS动画（Cascading Style Sheets Animations）是一种利用CSS语言实现的网页元素动态效果技术。它允许开发者在不依赖JavaScript的情况下，通过简单的声明式语法创建丰富的视觉过渡效果。以下是CSS动画的详细解析：

基本概念

• @keyframes规则：这是定义动画的关键部分，用来描述动画序列中关键帧的状态。每个关键帧定义了动画在特定时间点的样式。例如：

  @keyframes example {
    0% {transform: scale(1); opacity: 1;}
    50% {transform: scale(1.5); opacity: 0.5;}
    100% {transform: scale(1); opacity: 1;}
  }
  

• animation属性：用于将定义好的动画应用到某个元素上，并控制动画的播放行为，如持续时间、延迟、迭代次数、播放方向等。这是一个简写属性，涵盖了多个子属性，例如：

  element {
    animation-name: example; /* 动画名称 */
    animation-duration: 4s; /* 持续时间 */
    animation-timing-function: ease-in-out; /* 速度曲线 */
    animation-delay: 2s; /* 延迟 */
    animation-iteration-count: infinite; /* 迭代次数 */
    animation-direction: alternate; /* 播放方向 */
  }
  

animation 属性结构

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

属性	描述
animation-name	定义动画的名称，此名称必须对应于 @keyframes 规则的名称。
animation-duration	设置动画完成一个周期所需的时间。单位通常是秒（s）或毫秒（ms）。
animation-timing-function	规定动画的速度曲线。
animation-delay	定义动画开始之前的延迟时间。单位是秒（s）或毫秒（ms）。
animation-iteration-count	定义动画的播放次数。可以是具体的数字，如 2 表示播放两次，或者 infinite 表示无限循环。
animation-direction	控制动画的播放方向。
animation-fill-mode	规定当动画不播放时（即在动画开始之前、动画结束之后或循环的每一遍之间），元素的样式。
animation-play-state	控制动画的播放状态。

关键属性解释

• animation-name

  定义动画的名称，此名称必须对应于 @keyframes 规则的名称。 应用了一个名为 example的动画。

  animation-name: animation_name;
  

  如果想要动画立即开始且只播放一次，至少需要设置animation-name和animation-duration。

• animation-duration

  定义动画周期持续时间的属性。这个属性指定了一个动画从开始到结束需要多少秒或毫秒。如果动画没有指定持续时间，那么动画将不会运行，即使其他动画属性（如 animation-name 和 animation-timing-function）已经设置。

  animation-duration: time;
  

  请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

  设置了animation-name和animation-duration就可以形成了一个基本的动画。

  .container {
      width: 200px;
      height: 200px;
      background-color: red;
      animation-name: example;
      animation-duration: 4s;
  }
  

  example动画会在4秒内让元素从原样式到放大并且透明度变为0.5、再恢复到原样式，且只播放一次，结束后不改变样式，保持默认状态。效果如下：
  

  注意事项：

  • 当与 animation-iteration-count（动画重复次数）结合使用时，animation-duration 决定了单次动画的长度，而总动画时长会是 animation-duration 乘以 animation-iteration-count（除非迭代计数是 infinite）。
  • 如果没有设置 animation-delay，动画会在页面加载后立即开始计算其持续时间并执行。

• animation-timing-function

  它控制着动画随时间变化的速度曲线，决定了动画的加速、减速或其他特定节奏效果。比如 linear（匀速）、ease（默认，逐渐变慢）、ease-in（加速）、ease-out（减速）等。

  属性	描述	使用场景
  ease	慢速开始，然后加快，最后慢速结束。 默认值。	对于需要平滑过渡的动画，如淡入淡出、移动等。
  linear	动画从头到尾速度相同。匀速。	-
  ease-in	慢速开始。动画开始时缓慢加速，然后以恒定速度结束。	如果希望动画开始时有一个启动过程。
  ease-out	慢速结束。动画以恒定速度开始，然后缓慢减速直至结束。	当希望动画结束时缓缓停下，避免突兀感。
  ease-in-out	慢速开始和结束。动画开始时缓慢加速，中间以恒定速度进行，然后在结束前缓慢减速。	-
  cubic-bezier(n,n,n,n)	自定义贝塞尔曲线。	对于需要更复杂或特定节奏的动画。
  steps()	步进动画。	对于类似幻灯片切换或简单逐帧动画。

  • 自定义函数：cubic-bezier()

    该函数接受四个参数，范围从 0 到 1，定义了一个贝塞尔曲线，从而精确控制动画的速度变化。这四个值分别代表了贝塞尔曲线的两个控制点 (P1(x1, y1), P2(x2, y2))。
    例如：cubic-bezier(0.25, 0.1, 0.25, 1) 定义了一个自定义的加速-减速曲线。

  • 特殊函数：steps()

    steps() 函数用于创建步进动画效果，模拟逐帧动画。它接受两个参数，第一个参数指定了动画的总步数，第二个参数（可选）指定了每个步进变化发生的时间点（start 或 end）。例如，steps(2, start) 将动画分为两步，并在每一帧开始时跳变。默认值是end，意味着变化发生在每个时间间隔的结束。

  代码示例：

  @keyframes example {
      from {
          left: 0px;
      }
      to {
          left: 300px;
      }
  }
  
  .container {
      margin-bottom: 10px;
      width: 100px;
      height: 100px;
      position: relative;
      background-color: red;
      animation-name: example;
      animation-duration: 4s;
  }
  .container1 {
      animation-timing-function: linear;
  }
  .container2 {
      animation-timing-function: ease;
  }
  .container3 {
      animation-timing-function: ease-in;
  }
  .container4 {
      animation-timing-function: ease-out;
  }
  .container5 {
      animation-timing-function: ease-in-out;
  }
  .container6 {
      animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);
  }
  .container7 {
      animation-timing-function: steps(5, end);
  }
  

  效果如下：
  

• animation-delay

  用于定义动画开始执行前的延迟时间。这个属性可以让动画在页面加载一段时间后才开始，或者与其他动画序列协调启动时间，增加页面动态效果的控制灵活性。
  animation-delay不影响动画的总持续时间，只影响动画何时开始。

  animation-delay: time;
  

  • time：定义动画开始前等待的时间。时间值可以是正数（表示延迟），负数（表示动画从中间或结尾开始，给人一种回放的感觉），或者0s（表示没有延迟，动画立即开始）。时间值的单位通常是秒（s）或毫秒（ms）。

  .container1 {
      animation-delay: 1s;
  }
  .container2 {
      animation-delay: -1s;
  }
  .container3 {
      animation-delay: 0s;
  }
  

  效果如下：
  

• animation-iteration-count

  用于定义动画的重复次数。这个属性让你能够控制一个动画应该播放多少遍，或者是否无限循环。

  animation-iteration-count: number|infinite;
  

  • number: 一个整数值，定义动画应该播放的次数。例如，2表示动画将播放两次。默认1。
  • infinite: 关键字，表示动画应该无限次重复播放。

  代码示例：

  .container1 {
      animation-iteration-count: 2;
  }
  .container2 {
      animation-iteration-count: infinite;
  }
  

  效果如下：

• animation-direction

  定义动画在每次迭代时的播放方向。这个属性允许你控制动画是正常播放、反向播放，还是在正反播放之间交替进行，从而增加动画的多样性。

  如果动画只播放一次（默认或设置为 1），alternate 和 alternate-reverse 的效果将相同于 normal 或 reverse，因为没有后续的迭代来体现交替播放。

  animation-direction: normal|reverse|alternate|alternate-reverse;
  

  属性	描述
  normal	默认值，动画每次迭代都按照关键帧的顺序进行播放。
  reverse	动画每次迭代都按照关键帧的逆序进行播放。
  alternate	动画在偶数次迭代时正常播放，在奇数次迭代时反向播放。这意味着动画将在正播和反播之间交替。
  alternate-reverse	动画在首次迭代时反向播放，之后在偶数次迭代时反向播放，在奇数次迭代时正常播放。同样实现了正反播放的交替，但起始方向是反向。

  代码示例：

  .container1 {
      animation-direction: normal;
  }
  .container2 {
      animation-direction: reverse;
  }
  .container3 {
      animation-direction: alternate;
  }
  .container4 {
      animation-direction: alternate-reverse;
  }
  

  效果如下：
  

• animation-fill-mode

  用于设置CSS动画在开始前（延迟期）和结束后如何展示样式。这个属性能够控制动画之外的时间点上元素的样式，给动画增加更多控制和流畅性。

  使用 animation-fill-mode 时，确保动画至少有两帧关键帧以观察到效果，特别是在使用 backwards 或 both 时。

  animation-fill-mode: none|forwards|backwards|both;
  

  属性	描述
  none	默认值，动画在执行前后不改变元素的样式。这意味着动画结束后，元素会立即跳回到初始状态（如果有的话）。
  forwards	动画结束后，元素将停留在最后一个关键帧的样式上。这对于想要保持动画结束状态的场景非常有用。
  backwards	在动画 delay 时间内，元素会立即跳转到第一个关键帧的样式并保持，直到动画开始正式播放。这有助于避免动画开始时的突变感。
  both	同时应用 forwards 和 backwards 的行为。动画开始前采用第一帧的样式，结束后则停在最后一帧的样式。

  代码示例：

  @keyframes example {
      0% {
          left: -100px;
      }
      50% {
          left: 0px;
      }
      100% {
          left: 300px;
      }
  }
  .container {
      margin-bottom: 10px;
      width: 100px;
      height: 100px;
      position: relative;
      background-color: red;
      animation-name: example;
      animation-duration: 4s;
      /* 这里延迟了一秒才能让元素在开始的时候保持你想要的状态 */
      animation-delay: 1s;
  }
  .container1 {
      animation-fill-mode: none;
  }
  .container2 {
      animation-fill-mode: forwards;
  }
  .container3 {
      animation-fill-mode: backwards;
  }
  .container4 {
      animation-fill-mode: both;
  }
  

  效果如下：
  

• animation-play-state

  它允许你控制CSS动画的播放状态。这个属性对于动态地暂停和恢复动画特别有用，特别是在响应用户交互或实现某些动态效果时。

  animation-play-state: running | paused;
  

  属性	描述
  running	默认值，表示动画正在运行或应按计划进行。
  paused	设置此值后，动画将被暂停在其当前状态，直到将其更改为 running 为止。

  <!DOCTYPE html>
  <html lang="en">
      <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>Document</title>
          <style>
              @keyframes example {
                  50% {
                      left: 0px;
                  }
                  100% {
                      left: 300px;
                  }
              }
  
              .container {
                  margin-bottom: 10px;
                  width: 100px;
                  height: 100px;
                  position: relative;
                  background-color: red;
                  animation-name: example;
                  animation-duration: 4s;
                  animation-iteration-count: infinite;
              }
              .paused {
                  animation-play-state: paused;
              }
          </style>
      </head>
      <body>
          <div class="container"></div>
          <button onclick="toggleSpin()">Pause/Resume Animation</button>
      </body>
      <script>
          function toggleSpin() {
              var box = document.querySelector('.container');
              if (box.classList.contains('paused')) {
                  box.classList.remove('paused'); // 如果已暂停，则恢复播放
              } else {
                  box.classList.add('paused'); // 如果正在播放，则暂停
              }
          }
      </script>
  </html>
  
  

  效果如下：