css animation

CSS animation 是一种通过 CSS 属性来控制元素动画效果的技术。它可以用来创建各种各样的动画效果，如旋转、放大缩小、颜色变化等。使用 CSS animation 的好处是可以不需要 JavaScript 或其他脚本语言就能实现动画效果，同时也可以让网页加载速度更快。

要创建 CSS animation，需要定义一个 @keyframes 规则，该规则定义了动画的每一帧效果。然后，将该动画应用于具体的元素，通过指定动画的名称、持续时间、延迟时间、重复次数和播放方向等属性来控制动画效果。

以下是一个简单的 CSS animation 的示例：

/* 定义动画 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 应用动画 */
div {
  animation-name: spin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

该示例定义了一个名为 spin 的动画，通过 transform 属性实现旋转效果。然后，将该动画应用于一个 div 元素上，使其无限循环旋转。