白骑士的CSS教学进阶篇之变形与过渡 3.1.3 动画

        CSS 动画允许开发者在网页中创建复杂的动态效果，而不需要依赖 JavaScript。通过使用 ‘@keyframes‘ 规则定义动画的关键帧，以及 ‘animation‘ 属性来控制动画的行为和效果，你可以实现从简单到复杂的各种动画效果。以下内容将详细讲解 CSS 动画的各个部分，包括 ‘@keyframes‘、‘animation‘ 属性的各个属性（‘name‘、‘duration‘、‘timing-function‘、‘delay‘、‘iteration-count‘、‘direction‘）。

‘@keyframes‘ 规则

        ‘@keyframes‘ 规则用于定义 CSS 动画的关键帧。关键帧定义了动画的不同阶段，每个阶段指定了元素的样式。动画会根据这些关键帧的定义在不同时间点过渡到不同的样式。

        语法：

@keyframes animation-name {
  from {
    /* 起始状态 */
  }

  to {
    /* 结束状态 */
  }
}

        示例：

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

        效果：

• 定义了一个 ‘fadeIn‘ 动画，从完全透明过渡到完全不透明。

‘animation‘ 属性

        ‘animation‘ 属性用于指定动画的名称、持续时间、时间函数、延迟、重复次数和方向。可以通过简写方式将这些属性合并在一起使用，也可以分别设置。

        语法：

animation: name duration timing-function delay iteration-count direction;

动画名称（name）

        ‘name‘ 指定要使用的动画的名称，这个名称需要与 ‘@keyframes‘ 规则中定义的名称相匹配。

        示例：

.box {
  animation: fadeIn 2s ease-in;
}

        效果：

• 应用了之前定义的 ‘fadeIn‘ 动画，持续时间为 2 秒，时间函数为 ‘ease-in‘。

持续时间（duration）

        ‘duration‘ 指定动画的总持续时间。单位可以是秒（‘s‘）或毫秒（‘ms‘）。

        示例：

.box {
  animation: fadeIn 3s;
}

        效果：

• 动画将持续 3 秒钟完成。

时间函数（timing-function）

        ‘timing-function‘ 定义了动画的时间曲线，决定了动画的加速和减速效果。常见的时间函数有：

• ‘linear‘：动画以均匀的速度进行。
• ‘ease‘：动画开始和结束时较慢，中间加速。
• ‘ease-in‘：动画开始时较慢，结束时加速。
• ‘ease-out‘：动画开始时加速，结束时较慢。
• ‘ease-in-out‘：动画开始和结束时较慢，中间加速。
• ‘cubic-bezier(n, n, n, n)‘：自定义贝塞尔曲线，提供更多控制。

        示例：

.box {
  animation: fadeIn 2s ease-in-out;
}

        效果：

• 动画会以 ‘ease-in-out‘ 时间函数平滑过渡，开始和结束时较慢，中间加速。

延迟时间（delay）

        ‘delay‘ 指定动画开始前的延迟时间，单位为秒（‘s‘）或毫秒（‘ms‘）。

        示例：

.box {
  animation: fadeIn 2s ease 1s;
}

        效果：

• 动画将在 1 秒钟后开始，持续时间为 2 秒，时间函数为 ‘ease‘。

重复次数（iteration-count）

        ‘iteration-count‘ 定义动画的重复次数，可以是一个正整数或者 ‘infinite‘（无限次）。

        示例：

.box {
  animation: fadeIn 2s ease 0s 3;
}

        效果：

• 动画将重复 3 次。

动画方向（direction）

        ‘direction‘ 定义动画的播放方向。常见的值有：

• ‘normal‘：正常播放动画（默认值）。
• ‘reverse‘：反向播放动画。
• ‘alternate‘：动画在正向播放和反向播放之间交替。
• ‘alternate-reverse‘：动画在反向播放和正向播放之间交替。

        示例：

.box {
  animation: fadeIn 2s ease 0s infinite alternate;
}

        效果：

• 动画将无限次循环播放，并在正向和反向之间交替。

综合示例

        下面是一个综合使用了 ‘@keyframes‘ 和 ‘animation‘ 属性的示例：

        HTML：

<div class="box"></div>

        CSS：

@keyframes bounce {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-100px);
  }

  100% {
    transform: translateY(0);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: bounce 2s ease-in-out infinite;
}

        效果：

• ‘.box‘ 元素会在 2 秒钟内上下弹跳一次，使用 ‘ease-in-out‘ 时间函数平滑过渡，并无限次循环播放。

总结

        CSS 动画为网页设计提供了丰富的动态效果，可以通过 ‘@keyframes‘ 定义动画的关键帧，然后通过 ‘animation‘ 属性控制动画的各种属性，如名称、持续时间、时间函数、延迟、重复次数和方向。掌握这些动画技术，将使你能够创建更加生动、富有表现力的用户界面。通过适当的动画效果，可以提升用户体验，吸引用户注意并增加互动性。