CSS @keyframes详解

CSS @keyframes详解

引言

CSS @keyframes 是一种用于创建动画的常用技术。它允许我们对元素的属性进行逐帧的控制，从而实现各种各样的动画效果。本文将详细介绍 @keyframes 的用法和相关属性，帮助读者理解和运用这一强大的特性。

什么是@keyframes

@keyframes 是 CSS 中用于定义动画的关键帧规则。关键帧是动画过程中特定时间点的状态，而关键帧规则则定义了这些时间点的属性值。通过在 @keyframes 中指定关键帧的百分比和目标属性值，CSS 引擎可以逐渐改变元素的样式，从而实现平滑的动画效果。

基本语法

@keyframes 规则由关键帧选择器和一系列的 CSS 规则组成。关键帧选择器用于指定动画效果在何时何处执行。下面是一个典型的 @keyframes 规则的格式：

@keyframes animationName {
  from {
    /* 初始状态 */
    property: value;
  }

  to {
    /* 终止状态 */
    property: value;
  }

  /* 或者使用百分比指定关键帧 */
  50% {
    /* 中间状态 */
    property: value;
  }

  /* 可以指定多个关键帧 */
  75% {
    /* 中间状态 */
    property: value;
  }
}

在上述示例中，animationName 是动画的名称，可以根据需求自行命名。由于 @keyframes 中定义了多个状态，我们可以根据百分比或关键帧选择器来设置不同时间点的属性值。关键帧选择器可以是百分比，也可以是关键字如 from 和 to。在动画执行过程中，CSS 引擎会根据关键帧选择器指定的时间点计算出相应的属性值。

关键帧选择器

百分比

在 @keyframes 中，我们可以使用百分比来指定关键帧选择器。百分比值表示动画执行的时间进度，可以从 0% 到 100% 进行设置。我们可以根据需求选择多个百分比值，CSS 引擎会在这些时间点上进行插值计算，从而产生平滑的过渡效果。

以下是一个示例，展示了一个简单的闪烁动画效果：

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

在上述示例中，blink 是动画的名称。我们定义了四个关键帧选择器：0%、50%、25%、75% 和 100%。属性 opacity 在这些关键帧选择器上有不同的取值，CSS 引擎会根据这些关键帧选择器的时间点计算 opacity 的过渡值。

关键字 from 和 to

除了百分比，我们还可以使用两个关键字 from 和 to，来指定初始状态和终止状态的关键帧选择器。

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

在上例中，fadeOut 是动画的名称。我们使用了关键字 from（相当于 0%）和 to（相当于 100%）来定义了两个关键帧选择器。属性 opacity 在这两个关键帧选择器上有不同的取值，CSS 引擎会根据动画的执行时间计算逐渐改变的 opacity 值。

动画属性

animation-name

animation-name 属性用于指定要应用的动画名称。它接受一个或多个动画名称，多个名称使用逗号分隔。如果要在一个元素上同时应用多个动画，可以分别定义不同的 @keyframes 规则，并将动画名称组合在 animation-name 中。

animation-duration

animation-duration 属性用于指定动画的持续时间。它接受一个时间值，单位可以是秒（s）或毫秒（ms）。默认值是 0，意味着动画没有持续时间。

animation-timing-function

animation-timing-function 属性控制动画的时间进度。它接受一个或多个关键字或自定义的贝塞尔函数。常用的关键字有：linear（线性）、ease（缓入缓出）、ease-in（缓入） 、ease-out（缓出）和 ease-in-out（缓入缓出）。如果需要更细致的时间曲线，可以使用贝塞尔函数来定义。

下面是一个示例，展示了不同 animation-timing-function 值对动画效果的影响：

@keyframes move {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

#box1 {
  animation-name: move;
  animation-duration: 2s;
  animation-timing-function: linear;
}

#box2 {
  animation-name: move;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}

#box3 {
  animation-name: move;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.5, 0.25, 0.75, 0.9);
}

在上述示例中，我们定义了一个移动动画 move，将一个元素从左侧移动到右侧。然后我们分别将三个元素 #box1、#box2 和 #box3 应用了这个动画，但使用了不同的 animation-timing-function 值。

#box1 使用了 linear，它使得动画在整个过程中保持匀速。

#box2 使用了 ease-in-out，它使得动画在开始和结束时变慢，中间时变快。

#box3 使用了自定义贝塞尔函数cubic-bezier(0.5, 0.25, 0.75, 0.9)，它控制了动画时间进度的细节。

animation-delay

animation-delay 属性用于指定动画的延迟时间。它接受一个时间值，单位可以是秒（s）或毫秒（ms）。默认值是 0，意味着动画将立即开始。

animation-iteration-count

animation-iteration-count 属性用于指定动画的循环次数。它接受一个整数值或关键字值 infinite。默认值是 1，表示动画只执行一次。如果将值设为 infinite，动画将无限循环直到被停止。

animation-direction

animation-direction 属性用于指定动画的播放方向。它接受一些预定义的关键字，如 normal（正常播放）、reverse（反向播放）和 alternate（交替播放）。默认值是 normal。可以通过组合多个关键字来实现更复杂的播放方式，例如 alternate-reverse（交替反向播放）。

animation-fill-mode

animation-fill-mode 属性用于指定动画的填充模式。当动画不在播放时，指定如何显示元素的样式。它接受一些预定义的关键字，如 none（无填充） 、forwards（保留最后一个关键帧的样式） 、backwards（保留第一个关键帧的样式） 和 both（同时保留第一个和最后一个关键帧的样式）。默认值是 none。

animation-play-state

animation-play-state 属性用于控制动画的播放状态。它接受一些预定义的关键字，如 running（播放中）和 paused（暂停）。通过改变值，可以动态控制动画的播放和暂停。

animation属性的缩写

为了简化代码，CSS 提供了一个 animation 属性，用于同时设置所有与动画相关的属性。它的语法如下：

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

以下是一个示例：

#box {
  animation: move 2s ease-in-out 0s infinite alternate backwards running;
}

在上述示例中，#box 元素应用了一个名为 move 的动画，动画持续时间为 2 秒，使用了缓入缓出的时间函数，没有延迟，无限循环，交替播放，保留第一个关键帧的样式，并且处于播放状态。

使用@keyframes创建动画

使用 @keyframes 和相关的动画属性，我们可以创建各种炫酷的动画效果。下面是一个示例，展示了一个简单的平移和旋转动画：

@keyframes slideAndRotate {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(200px) rotate(180deg);
  }

  100% {
    transform: translateX(400px) rotate(360deg);
  }
}

#box {
  animation-name: slideAndRotate;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

在上述示例中，我们定义了一个名为 slideAndRotate 的动画，它会使元素进行平移和旋转。#box 元素应用了这个动画，持续时间为 4 秒，使用了缓入缓出的时间函数，延迟 1 秒开始，无限循环，交替播放。

总结

CSS @keyframes 是一种用于创建动画的重要技术。通过定义关键帧选择器和属性值，我们可以控制元素在动画过程中的状态和变化。动画属性可以进一步调整动画的持续时间、时间函数、延迟、循环次数等。通过灵活运用 @keyframes 和相关属性，我们可以创造出各种令人惊艳的动画效果。