@keyframes的动画怎么用

`@keyframes`是CSS中用于定义动画的规则。可以通过`@keyframes`规则来定义动画的关键帧，然后将其应用到元素上。以下是一个简单的示例代码：

HTML代码：

<div id="box"></div>

CSS代码：

#box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: myanimation 2s ease-in-out infinite;
}

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

在这个示例中，我们定义了一个`<div>`元素，然后定义了一个名为`myanimation`的动画，并将其应用到`<div>`元素上。`myanimation`动画由三个关键帧组成，分别是0%、50%和100%。在第一个关键帧中，背景色为红色；在第二个关键帧中，背景色为蓝色；在第三个关键帧中，背景色为绿色。我们使用`animation`属性将`myanimation`动画应用到`<div>`元素上，并指定了动画的时长为2秒，缓动函数为`ease-in-out`，重复次数为无限。这样，`<div>`元素就会以`myanimation`动画的方式进行背景色的变化。

`@keyframes`规则还可以定义更多的关键帧，可以使用`from`和`to`关键字分别代替0%和100%。同时，`@keyframes`规则还可以定义多个动画，可以使用不同的名称进行区分。在动画的定义中，还可以使用CSS属性来实现各种不同的效果，包括位移、旋转、缩放、透明度等等。