引导者## CSS Animation 属性详解
简介
CSS Animation 提供了一种机制，可以通过 CSS 来创建动画。它允许你定义动画序列，指定动画的持续时间、时间函数、迭代次数以及其他属性，从而无需使用 JavaScript 就能创建丰富的动画效果。 相比于 CSS Transitions（过渡），Animation 提供了更强大的控制能力，可以定义更复杂的动画序列。### 一、 `@keyframes` 规则`@keyframes` 规则是 CSS Animation 的核心。它定义了动画的各个关键帧，每个关键帧代表动画在特定时间点上的样式。 `@keyframes` 规则包含一个动画名称和一系列关键帧。
语法:
```css @keyframes animation-name {from { /
0%
/ }to { /
100%
/ }0% { /
开始状态
/ }25% { /
25% 时状态
/ }50% { /
50% 时状态
/ }75% { /
75% 时状态
/ }100% { /
结束状态
/ } } ```
`animation-name`
: 动画的名称，用于在元素上引用该动画。 这个名称必须与应用动画的元素的 `animation-name` 属性值一致。
`from` 和 `to`
: 简写形式，分别等同于 `0%` 和 `100%`。 可以同时使用 `from`, `to` 和百分比。
百分比
: 指定关键帧在动画中的时间点 (0% 到 100%)。 你可以指定任意数量的关键帧，并使用任意百分比。
示例:
```css @keyframes mymove {from {left: 0px;}to {left: 200px;} }.element {animation-name: mymove; /
应用动画
/animation-duration: 5s; /
动画持续时间
/ } ```这段代码定义了一个名为 `mymove` 的动画，将元素从左边移动到右边，持续时间为 5 秒。### 二、 `animation` 属性的子属性`animation` 属性是 CSS Animation 的核心属性，它是一个简写属性，包含以下多个子属性：
`animation-name`
: 指定要应用的动画名称 (必须与 `@keyframes` 中的名称一致)。 如果该值为 `none`，则不会应用任何动画。
`animation-duration`
: 指定动画持续时间，单位为秒 (s) 或毫秒 (ms)。
`animation-timing-function`
: 指定动画的速度曲线，例如 `ease`, `linear`, `ease-in`, `ease-out`, `ease-in-out`, `cubic-bezier(n,n,n,n)` 等。 `cubic-bezier()` 函数允许你自定义动画曲线。
`animation-delay`
: 指定动画开始之前的延迟时间，单位为秒 (s) 或毫秒 (ms)。
`animation-iteration-count`
: 指定动画播放的次数。 可以使用数值 (例如 `3` 表示播放 3 次) 或 `infinite` 表示无限循环。
`animation-direction`
: 指定动画的播放方向。 值包括 `normal` (默认值，正向播放), `reverse` (反向播放), `alternate` (每次迭代交替正反向播放), `alternate-reverse` (每次迭代交替反向正向播放)。
`animation-fill-mode`
: 指定动画在动画开始前和结束后如何影响元素的样式。 值包括 `none` (默认值，动画结束后元素恢复到初始状态), `forwards` (动画结束后元素保持最终状态), `backwards` (动画开始前元素采用动画的第一帧样式), `both` (结合 `forwards` 和 `backwards`)。
`animation-play-state`
: 控制动画的播放状态，`running` (默认值，正在播放), `paused` (暂停)。
示例 (使用简写属性):
```css .element {animation: mymove 5s ease-in-out 1s infinite alternate; } ```这段代码等同于：```css .element {animation-name: mymove;animation-duration: 5s;animation-timing-function: ease-in-out;animation-delay: 1s;animation-iteration-count: infinite;animation-direction: alternate; } ```### 三、 `cubic-bezier()` 函数`cubic-bezier()` 函数允许你自定义动画的速率曲线，它接受四个参数，每个参数的值都在 0 到 1 之间：
p1x, p1y
: 第一个控制点的 x 和 y 坐标。
p2x, p2y
: 第二个控制点的 x 和 y 坐标。通过调整这四个参数，你可以创建各种各样的动画曲线。 有很多在线工具可以帮助你可视化和生成 `cubic-bezier()` 函数的参数。### 四、 动画的应用场景CSS Animation 可以用于创建各种动画效果，例如：
元素的移动、缩放、旋转、透明度变化等。
创建加载动画、进度条等交互元素。
实现复杂的页面过渡效果。### 五、 与 CSS Transitions 的区别CSS Transitions 通常用于处理元素属性值的单次变化，而 CSS Animations 则更适合处理一系列连续的变化，即复杂的动画序列。 Transitions 是属性值的单次过渡，Animations 是关键帧序列的动画。 两者都可以实现动画效果，但应用场景略有不同。希望这篇文档能帮助你理解 CSS Animation 属性。 记得查阅 MDN Web Docs 获取更详尽的信息和最新的规范。
CSS Animation 属性详解**简介**CSS Animation 提供了一种机制，可以通过 CSS 来创建动画。它允许你定义动画序列，指定动画的持续时间、时间函数、迭代次数以及其他属性，从而无需使用 JavaScript 就能创建丰富的动画效果。 相比于 CSS Transitions（过渡），Animation 提供了更强大的控制能力，可以定义更复杂的动画序列。
一、 `@keyframes` 规则`@keyframes` 规则是 CSS Animation 的核心。它定义了动画的各个关键帧，每个关键帧代表动画在特定时间点上的样式。 `@keyframes` 规则包含一个动画名称和一系列关键帧。**语法:**```css @keyframes animation-name {from { /* 0% */ }to { /* 100% */ }0% { /* 开始状态 */ }25% { /* 25% 时状态 */ }50% { /* 50% 时状态 */ }75% { /* 75% 时状态 */ }100% { /* 结束状态 */ } } ```* **`animation-name`**: 动画的名称，用于在元素上引用该动画。 这个名称必须与应用动画的元素的 `animation-name` 属性值一致。 * **`from` 和 `to`**: 简写形式，分别等同于 `0%` 和 `100%`。 可以同时使用 `from`, `to` 和百分比。 * **百分比**: 指定关键帧在动画中的时间点 (0% 到 100%)。 你可以指定任意数量的关键帧，并使用任意百分比。**示例:**```css @keyframes mymove {from {left: 0px;}to {left: 200px;} }.element {animation-name: mymove; /* 应用动画 */animation-duration: 5s; /* 动画持续时间 */ } ```这段代码定义了一个名为 `mymove` 的动画，将元素从左边移动到右边，持续时间为 5 秒。
二、 `animation` 属性的子属性`animation` 属性是 CSS Animation 的核心属性，它是一个简写属性，包含以下多个子属性：* **`animation-name`**: 指定要应用的动画名称 (必须与 `@keyframes` 中的名称一致)。 如果该值为 `none`，则不会应用任何动画。 * **`animation-duration`**: 指定动画持续时间，单位为秒 (s) 或毫秒 (ms)。 * **`animation-timing-function`**: 指定动画的速度曲线，例如 `ease`, `linear`, `ease-in`, `ease-out`, `ease-in-out`, `cubic-bezier(n,n,n,n)` 等。 `cubic-bezier()` 函数允许你自定义动画曲线。 * **`animation-delay`**: 指定动画开始之前的延迟时间，单位为秒 (s) 或毫秒 (ms)。 * **`animation-iteration-count`**: 指定动画播放的次数。 可以使用数值 (例如 `3` 表示播放 3 次) 或 `infinite` 表示无限循环。 * **`animation-direction`**: 指定动画的播放方向。 值包括 `normal` (默认值，正向播放), `reverse` (反向播放), `alternate` (每次迭代交替正反向播放), `alternate-reverse` (每次迭代交替反向正向播放)。 * **`animation-fill-mode`**: 指定动画在动画开始前和结束后如何影响元素的样式。 值包括 `none` (默认值，动画结束后元素恢复到初始状态), `forwards` (动画结束后元素保持最终状态), `backwards` (动画开始前元素采用动画的第一帧样式), `both` (结合 `forwards` 和 `backwards`)。 * **`animation-play-state`**: 控制动画的播放状态，`running` (默认值，正在播放), `paused` (暂停)。**示例 (使用简写属性):**```css .element {animation: mymove 5s ease-in-out 1s infinite alternate; } ```这段代码等同于：```css .element {animation-name: mymove;animation-duration: 5s;animation-timing-function: ease-in-out;animation-delay: 1s;animation-iteration-count: infinite;animation-direction: alternate; } ```
三、 `cubic-bezier()` 函数`cubic-bezier()` 函数允许你自定义动画的速率曲线，它接受四个参数，每个参数的值都在 0 到 1 之间：* **p1x, p1y**: 第一个控制点的 x 和 y 坐标。 * **p2x, p2y**: 第二个控制点的 x 和 y 坐标。通过调整这四个参数，你可以创建各种各样的动画曲线。 有很多在线工具可以帮助你可视化和生成 `cubic-bezier()` 函数的参数。
四、 动画的应用场景CSS Animation 可以用于创建各种动画效果，例如：* 元素的移动、缩放、旋转、透明度变化等。 * 创建加载动画、进度条等交互元素。 * 实现复杂的页面过渡效果。
五、 与 CSS Transitions 的区别CSS Transitions 通常用于处理元素属性值的单次变化，而 CSS Animations 则更适合处理一系列连续的变化，即复杂的动画序列。 Transitions 是属性值的单次过渡，Animations 是关键帧序列的动画。 两者都可以实现动画效果，但应用场景略有不同。希望这篇文档能帮助你理解 CSS Animation 属性。 记得查阅 MDN Web Docs 获取更详尽的信息和最新的规范。
