CSS3教程 - 13 动画

CSS 中的动画主要包括两种，一种是过渡动画，例如颜色、大小、透明度的慢慢变化；另一种是帧动画，通过设置多个关键帧，通过在关键帧之间的切换实现动画。

13.1 过渡动画

过渡动画是 状态之间的渐变，当 CSS 属性的值发生变化时，浏览器会在指定的时间内逐步变化，而不是立即跳转到新值。

1 过渡的使用

直接举个栗子：

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      .box1 {
        width: 600px;
        height: 200px;
        background-color: lightgray;
      }

      .box2 {
        width: 100px;
        height: 100px;
        background-color: skyblue;
      }

      .box1:hover .box2 {
        width: 200px;
        height: 200px;
      }
    </style>
  </head>

  <body>
    <div class="box1">
      <div class="box2">foooor.com</div>
    </div>
  </body>
</html>

上面的代码很简单，就是 box1 中嵌套了 box2，当鼠标悬浮在 box1 上的时候，box2 的尺寸就会变成 200px。

显示如下：

但是鼠标悬浮的时候，box2 的尺寸是瞬间变大的，没有过渡效果，下面就给鼠标悬浮添加过渡效果。

css

.box2 {
  width: 50px;
  height: 50px;
  background-color: skyblue;

  transition-property: width, height;  /* 指定要执行过渡的属性 */
  transition-duration: 1s;  /* 指定过渡效果的持续时间 */
}

上面给 box2 添加了过渡相关的属性，transition-property 指定要指定过渡的属性，多个属性使用 , 分隔，如果所有属性都需要过渡，则使用 all 关键字（transition-property: all;）；
transition-duration：指定过渡效果的持续时间，单位可以使用秒（s）和毫秒（ms）。

显示如下：

如果多个属性的过渡时间不同，那么可以分别指定过渡时间：

css

transition-property: width, height;  /* 指定要执行过渡的属性 */
transition-duration: 1s, 500ms;  /* 指定过渡效果的持续时间 */

上面为宽度指定过渡时间为 1s，高度的过渡时间为 500ms 。

CSS 中大部分属性都支持过渡效果，从一个有效数值过渡的另一个有效数值，需要注意，有的值默认是 auto 是不可以的，需要设置为数值才可以。

颜色也是可以过渡，例如将鼠标悬浮后，box2 的颜色设置为粉色：

css

.box2 {
  width: 100px;
  height: 100px;
  background-color: skyblue;

  transition-property: all;  /* 指定要执行过渡的属性 */
  transition-duration: 1s;  /* 指定过渡效果的持续时间 */
}

.box1:hover .box2 {
  width: 200px;
  height: 200px;
  background-color: lightpink;
}

上面设置所有属性都指定多度动画，然后设置鼠标悬浮后，box2 的颜色为粉色。

显示如下：

2 过渡时序函数

过渡时序函数用于定义过渡效果的速度曲线。它决定了属性值在过渡过程中如何随时间变化，从而影响动画的流畅度和视觉效果。

CSS 提供了一些预定义的时序函数，适用于不同的动画效果：

时序函数	描述	运动曲线效果
`linear`	匀速运动（速度恒定）	🚗——🚗——🚗——🚗
`ease`	先慢后快再慢（默认值）	🚗⏳➡️🚀➡️⏳🚗
`ease-in`	慢慢加速（适合渐入效果）	🚗⏳➡️🚀
`ease-out`	快速开始，然后减速（适合渐出效果）	🚀➡️⏳🚗
`ease-in-out`	先慢后快再慢（比 `ease` 更柔和）	🚗⏳➡️🚀➡️⏳🚗
`step-start`	直接跳到最终状态	🚀（瞬移）
`step-end`	保持初始状态，最后一刻跳转	🚗🚗🚗🚗🚀
`steps(n, jump-type)`	分步跳跃动画	🚗→🚗→🚗→🚗
`cubic-bezier(x1, y1, x2, y2)`	自定义贝塞尔曲线	🎨（自由定制）