CSS 循环动画|极客教程

CSS 循环动画

1. 简介

CSS 是用于控制网页样式和布局的标记语言，它具有强大的动画效果控制能力。CSS 动画为网页增添了生动和活力，其中循环动画是一种非常常见和有趣的动画效果。本文将详细介绍 CSS 中循环动画的实现方法和应用场景。

2. 循环动画的概念

循环动画是指在一个动画周期结束后，再次启动动画，形成连续循环的效果。通过在 CSS 中设置关键帧（keyframes）和动画属性，可以实现各种各样的循环动画效果。

3. CSS keyframes

CSS keyframes 是用于定义动画过程中的关键帧的一种机制。通过定义关键帧，可以精确控制动画在不同时间点的样式变化。在 keyframes 声明中，我们可以指定动画的各个百分比阶段，并定义每个阶段的样式。

下面是一个简单的 CSS keyframes 的示例：

@keyframes myAnimation {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0px);
  }
}

在上述示例中，我们定义了一个名为 myAnimation 的关键帧动画。在动画的 0% 处，元素不发生位移；在 50% 处，元素向右位移 100 像素；在 100% 处，元素回到原始位置。

4. CSS animation 属性

CSS animation 属性用于控制动画的具体表现。它可以定义动画的名称、持续时间、动画速度、动画延迟等参数。

下面是一个 CSS animation 属性的示例：

div {
  animation-name: myAnimation;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

在上述示例中，我们将 animation-name 设置为 myAnimation，这样元素将应用名为 myAnimation 的关键帧动画。animation-duration 指定了动画的持续时间为 2 秒，animation-timing-function 设置动画的速度曲线为线性，animation-iteration-count 则设置动画的循环次数为无限。

5. 循环动画的实现

使用 CSS keyframes 和 animation 属性，我们可以实现各种各样的循环动画效果。下面介绍几个常见的循环动画实现方法。

5.1 旋转动画

旋转动画是指将元素围绕其轴心旋转一定角度的动画效果。通过在 keyframes 中设置 transform 属性的 rotate 值，可以实现旋转动画。

下面是一个实现旋转动画的示例：

@keyframes rotateAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

div {
  animation-name: rotateAnimation;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

在上述示例中，我们定义了一个名为 rotateAnimation 的关键帧动画。在动画的 0% 处，元素不发生旋转；在 100% 处，元素围绕其轴心顺时针旋转 360 度。

5.2 淡入淡出动画

淡入淡出动画是指元素逐渐出现和消失的动画效果。通过在 keyframes 中设置 opacity 属性的值，可以实现淡入淡出动画。

下面是一个实现淡入淡出动画的示例：

@keyframes fadeInOutAnimation {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

div {
  animation-name: fadeInOutAnimation;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

在上述示例中，我们定义了一个名为 fadeInOutAnimation 的关键帧动画。在动画的 0% 处，元素完全透明，即不可见；在 50% 处，元素完全不透明，即可见；在 100% 处，元素再次变为完全透明。

5.3 弹跳动画

弹跳动画是指元素以弹簧效果上下反复运动的动画效果。通过在 keyframes 中设置 transform 属性的值，可以实现弹跳动画。

下面是一个实现弹跳动画的示例：

@keyframes bounceAnimation {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

div {
  animation-name: bounceAnimation;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

在上述示例中，我们定义了一个名为 bounceAnimation 的关键帧动画。在动画的 0%、20%、50%、80% 和 100% 处，元素不发生位移；在 40% 处，元素向上位移 30 像素；在 60% 处，元素向上位移 15 像素。