5.3.1 CSS动画基础

CSS动画是一种强大的工具，它允许开发者创建动态和交互式的网页元素。通过CSS动画，我们可以控制HTML元素的样式变化，实现平滑的过渡效果。

CSS动画的基础主要包括以下几个概念：

• 动画属性：这是你想要改变的CSS属性，例如width、height、opacity等。
• 持续时间：动画完成一个周期所需的时间，使用animation-duration属性来设置。
• 动画函数：这决定了动画在持续时间内如何变化，例如linear、ease-in、ease-out、ease-in-out等。
• 动画迭代：这决定了动画应该播放多少次，使用animation-iteration-count属性来设置。
• 动画方向：这决定了动画是否应该反向播放，使用animation-direction属性来设置。

5.3.2 关键帧

关键帧是CSS动画中非常重要的概念，它允许你定义动画在不同时间点的状态。你可以使用@keyframes规则来创建关键帧动画。

以下是一个简单的关键帧动画示例：

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

div {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

在上面的示例中，@keyframes定义了一个名为example的关键帧动画，该动画将元素的背景颜色从红色更改为黄色，然后更改为蓝色，最后更改为绿色。div选择器应用了这个动画，并设置了动画的持续时间为4秒，以及无限次迭代。

5.3.3 CSS动画的创建

创建CSS动画的基本步骤如下：

1. 定义关键帧动画：使用@keyframes规则定义关键帧动画。
2. 应用动画：将animation-name属性设置为关键帧动画的名称，将animation-duration属性设置为动画的持续时间。
3. 设置其他动画属性：根据需要设置其他动画属性，如animation-iteration-count、animation-direction等。

5.3.4 注意事项

• 尽量避免使用过于复杂的动画，以免影响页面性能。
• 在使用动画时，要注意用户体验，避免动画过于频繁或过于复杂，导致用户感到厌烦。
• 对于移动设备，要特别注意动画的性能影响，因为移动设备的性能通常比桌面设备差。

5.3.5 示例

以下是一个更复杂的CSS动画示例，该动画将改变一个元素的宽度、高度和背景颜色：

@keyframes example {
  0%   {width: 100px; height: 100px; background-color: red;}
  50%  {width: 200px; height: 200px; background-color: blue;}
  100% {width: 100px; height: 100px; background-color: red;}
}

div {
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

在上面的示例中，动画将在4秒内将元素的宽度和高度从100px增加到200px，并将背景颜色从红色更改为蓝色。然后，动画将元素恢复到其原始状态，形成一个无限循环的动画效果。