html中animation属性

在HTML中，`animation`属性是CSS动画的一种方式，它可以让元素在指定的时间内从一种样式过渡到另一种样式。该属性通常与`@keyframes`规则一起使用，`@keyframes`规则指定了动画的关键帧，即元素在动画过程中应该出现的样式。

`animation`属性有以下几个可用值：

- `animation-name`: 指定要应用的`@keyframes`规则的名称。
- `animation-duration`: 指定动画的持续时间，以秒或毫秒为单位。
- `animation-timing-function`: 指定动画的时间函数，即元素在动画过程中的加速度曲线。
- `animation-delay`: 指定动画开始之前的延迟时间，以秒或毫秒为单位。
- `animation-iteration-count`: 指定动画应该重复多少次，或是否应该无限重复。
- `animation-direction`: 指定动画应该向前播放、向后播放、交替播放还是反向播放。
- `animation-fill-mode`: 指定动画在播放前和播放后如何应用样式。
- `animation-play-state`: 指定动画是否正在运行或已暂停。

以下是一个示例，演示如何使用`animation`属性：

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        animation-name: move;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
        animation-delay: 1s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-fill-mode: forwards;
        animation-play-state: running;
    }

    @keyframes move {
        0% {
            transform: translateX(0);
        }
        50% {
            transform: translateX(100px);
        }
        100% {
            transform: translateX(0);
        }
    }
</style>

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

此示例将创建一个具有无限次交替播放的动画，该动画会使一个红色正方形元素在X轴上来回移动。动画将在1秒后开始，持续2秒，采用ease-in-out时间函数，并在动画结束时保留最终位置。