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元素上，实现了一个旋转效果。

css 动画 使用

css 动画使用