css3的animation（又是补基础的一天）CSS3 的 `animation` 属性用于创建动画效果，它可以让元素

mdn文档地址

理解

CSS3 的 animation 属性用于创建动画效果，它可以让元素从一个状态平滑地过渡到另一个状态。

animation 是一个复合属性，可以简化动画的定义过程，将动画的各个方面（如名称、持续时间、速度曲线等）合并到一个属性中。

基本语法

selector {
    animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state]
}

1. 动画的各个属性

animation-name：指定要应用的动画的名称，即关键帧（@keyframes）的名称。
```
animation-name: slidein
```
animation-duration：指定动画完成一个周期所需的时间。默认值为 0s（无动画）。
```
animation-duration: 2s
```
animation-timing-function：指定动画的速度曲线。常见值包括 linear（线性），ease（缓动），ease-in（以低速开始），ease-out（以低速结束），ease-in-out（以低速开始和结束），cubic-bezier()（自定义）。
```
animation-timing-function: ease-in-out
```
animation-delay：指定动画开始之前的延迟时间。默认值为 0s。
```
animation-delay: 1s
```
animation-iteration-count：指定动画循环的次数。可以是一个具体的次数（如 1，2）或 infinite（无限循环）。
```
animation-iteration-count: infinite
```
animation-direction：指定动画在每次完成后是否反向播放。值包括 normal（正常），reverse（反向），alternate（交替），alternate-reverse（反向交替）。
```
animation-direction: alternate
```
animation-fill-mode：指定动画在播放之前和之后如何应用样式。值包括 none，forwards，backwards，both。

none:当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。

forwards:目标将保留由执行期间遇到的最后一个关键帧计算值。最后一个关键帧取决于animation-direction和animation-iteration-count的值

backwards:动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。第一个关键帧取决于animation-direction的值

both:动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。

    animation-fill-mode: forwards

animation-play-state：控制动画的播放状态。可以是 running（运行中）或 paused（暂停）。
```
animation-play-state: paused
```

2. 关键帧动画（`@keyframes`）

关键帧定义了动画中间的变化点，即从什么状态过渡到什么状态。关键帧通过 @keyframes 规则定义。

@keyframes slidein {
    from {
        transform: translateX(0%)
    }
    to {
        transform: translateX(100%)
    }
}

可以使用百分比来定义多个中间状态：

@keyframes example {
    0% {
        transform: translateX(0%)
    }
    50% {
        transform: translateX(50%)
    }
    100% {
        transform: translateX(100%)
    }
}

3. 使用动画

一旦定义了 @keyframes，可以将动画应用到元素上。

.element {
    animation-name: slidein
    animation-duration: 2s
    animation-timing-function: ease-in-out
    animation-iteration-count: infinite
}

或者，使用 animation 复合属性一次性定义所有内容：

.element {
    animation: slidein 2s ease-in-out infinite
}

4. 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 Animation Example</title>
    <style>
        @keyframes colorChange {
            0% {
                background-color: red
                transform: translateX(0)
            }
            50% {
                background-color: yellow
                transform: translateX(100px)
            }
            100% {
                background-color: green
                transform: translateX(0)
            }
        }

        .box {
            width: 100px
            height: 100px
            animation: colorChange 4s ease-in-out infinite
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这个示例中，一个 .box 元素将会连续地在红色、黄色和绿色之间改变背景颜色，并在水平方向上平滑移动。

5. 注意事项

动画可能会影响性能，特别是在复杂页面或低性能设备上，因此在使用时应当考虑性能开销。
不是所有的浏览器都完全支持 CSS 动画的所有功能，尤其是在旧版浏览器中，可能需要添加浏览器前缀（如 -webkit-，-moz-）。
动画的平滑性和流畅性在某些情况下可能会受到页面中其他元素的影响，尤其是在有大量动画或繁重的计算任务时。

css3的animation（又是补基础的一天）