面试题：CSS 怎样实现动画？

面试题：CSS 怎样实现动画？

（有哪些）CSS 主要通过**过渡（transitions）和关键帧（keyframes）**实现动画。

---

（过渡是什么）过渡指的是元素**从一种状态（样式）转变为另一种状态（样式）**的动画效果。过渡经常配合 :hover 或 JS 事件使用（触发元素变为另一种状态）。

（过渡怎么实现）通过设置元素 transition 样式，从而设置元素的过渡效果。当元素某些样式变化后，这种变化会根据预先定义的 transition 样式中规定的过渡效果进行变换（核心！！！）。

（过渡的语法简单说明）

.element{
    transition: property duration timing-function delay;
    /* 过渡属性：none(默认)、all(最常用)、特定属性名(多个属性名以 , 分割) */
    /* 持续时间：<number>s/ms(接收两种单位，默认值为 0)(如果给多个属性指定，则多个时间以 , 分割) */
    /* 过渡速度曲线: ....... */
    /* 过渡开始前的延迟时间：<number>s/ms(接收两种单位，默认值为 0) */
}

（过渡的注意事项）并不是所有属性都可以过渡，必须值为数字，或可以转换为数字的属性才支持过渡。

---

（关键帧动画是什么）关键帧动画指的是通过设置多个关键帧来实现的一种动画效果。与过渡效果不同，关键帧动画通常不需要什么触发条件。并且关键帧动画在细节的把握上更加细腻。

（关键帧动画怎么实现）要使用关键帧动画，首先需要使用 @keyframes 动画名 {} 定义一个动画，由一系列关键帧组成。然后在某些元素身上使用 animation 样式来应用动画。

（定义关键帧动画语法简单说明）

• 只设置开始结束关键帧

  @keyframes 动画名 {
      from { // 开始时刻的关键帧
          
      }
      to { // 结束时刻的关键帧
          
      }
  }
  

• 设置百分比关键帧（可以设置任意数量的关键帧）

  @keyframes 动画名 {
      0% { // 开始时刻的关键帧
          
      }
      20% {
          
      }
      xx%{ // 可以设置任意时刻的关键帧
          
      }
      80%{
          
      }
      100% { // 结束时刻的关键帧
          
      }
  }
  

（使用关键帧动画语法简单说明）

.element{
    animation: animation-name duration timing-function delay iteration-count direction fill-mode
    /* 动画名(见动画定义) 持续时间(同过渡) 动画速度曲线(同过渡) 动画开始前延迟时间(同过渡) 动画播放次数(<number>, infinite 表示无限次) 动画方向(normal 开始到结束, reverse 结束到开始, alternate 交替, alternat-reverse 反方向交替) 动画结束后的状态(forwards 动画结束时状态, backwards 动画开始时状态) */
    animation-play-status: running; // 动画播放状态，running 默认值，播放；paused 暂停
}

REFERENCES

https://github.com/Nasir1423/front-end-notes/blob/main/1-HTML%2BCSS/HTML%2BCSS.md#%E8%BF%87%E6%B8%A1day11181p882

https://github.com/Nasir1423/front-end-notes/blob/main/1-HTML%2BCSS/HTML%2BCSS.md#%E5%8A%A8%E7%94%BB