CSS 动画教程：从入门到精通

CSS 动画是通过 CSS 属性来控制元素的动画效果。以下是使用 CSS 动画的步骤：

定义动画关键帧：使用 @keyframes 规则定义动画的关键帧，即动画的起始状态、中间状态和结束状态。
定义动画属性：使用 CSS 样式表中的动画属性定义动画效果，例如 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count 和 animation-direction 等。
将动画应用到元素：使用 CSS 选择器将动画应用到需要动画效果的元素上，例如使用 class 选择器或 id 选择器。

例如，下面是一个使用 CSS 动画实现旋转效果的示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: spin;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>
</head>
<body>

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

</body>
</html>

在上面的代码中，定义了一个 class 为 box 的 div 元素，应用了 spin 动画。spin 动画在 @keyframes 规则中定义了两个关键帧，一个是动画的起始状态，一个是动画的结束状态。同时，使用 animation-duration 和 animation-timing-function 属性控制动画的持续时间和时间函数，使用 animation-iteration-count 属性控制动画的重复次数。最终，通过 CSS 选择器将动画应用到 box 元素上，实现了一个旋转效果。