animationcss属性（animate动画css）

animationcss属性

简介

`animation` CSS属性指定元素的动画。它定义动画的时长、延迟、迭代次数、时间函数和动画名称。

多级标题

语法

``` animation: ; ```

参数

``：动画名称

``：动画时长

``：动画延迟

``：动画迭代次数

``：动画时间函数

内容详细说明

`animation`属性可以接收以下值：

动画名称：

引用在`@keyframes`规则中定义的动画名称。

动画时长：

指定动画的时长，单位为秒或毫秒。

动画延迟：

指定动画开始前的延迟时间，单位为秒或毫秒。

动画迭代次数：

指定动画迭代的次数。它可以是无限（`infinite`）或一个数字。

动画时间函数：

指定动画的速度变化。它可以是`linear`（线性）、`ease`（缓和）、`ease-in`（缓入）、`ease-out`（缓出）、`ease-in-out`（缓入缓出）或自定义的贝塞尔曲线。

示例

创建名为`my-animation`的动画：```css @keyframes my-animation {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);} }div {animation: my-animation 5s infinite ease-in-out; } ```这将为`div`元素创建一个旋转动画，该动画将在5秒内无限地重复，并以缓入缓出的方式进行。

兼容性

`animation`属性在所有现代浏览器中都得到支持。旧版浏览器需要使用前缀，如`-webkit-animation`（Safari）、`-moz-animation`（Firefox）和`-o-animation`（Opera）。

浏览器支持

| 浏览器 | 版本 | |---|---| | Chrome | 1 | | Firefox | 1 | | Safari | 1 | | Opera | 12 | | Microsoft Edge | 12 |

**animationcss属性****简介**`animation` CSS属性指定元素的动画。它定义动画的时长、延迟、迭代次数、时间函数和动画名称。**多级标题****语法**``` animation: ; ```**参数*** ``：动画名称 * ``：动画时长 * ``：动画延迟 * ``：动画迭代次数 * ``：动画时间函数**内容详细说明**`animation`属性可以接收以下值：* **动画名称：**引用在`@keyframes`规则中定义的动画名称。 * **动画时长：**指定动画的时长，单位为秒或毫秒。 * **动画延迟：**指定动画开始前的延迟时间，单位为秒或毫秒。 * **动画迭代次数：**指定动画迭代的次数。它可以是无限（`infinite`）或一个数字。 * **动画时间函数：**指定动画的速度变化。它可以是`linear`（线性）、`ease`（缓和）、`ease-in`（缓入）、`ease-out`（缓出）、`ease-in-out`（缓入缓出）或自定义的贝塞尔曲线。**示例**创建名为`my-animation`的动画：```css @keyframes my-animation {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);} }div {animation: my-animation 5s infinite ease-in-out; } ```这将为`div`元素创建一个旋转动画，该动画将在5秒内无限地重复，并以缓入缓出的方式进行。**兼容性**`animation`属性在所有现代浏览器中都得到支持。旧版浏览器需要使用前缀，如`-webkit-animation`（Safari）、`-moz-animation`（Firefox）和`-o-animation`（Opera）。**浏览器支持**| 浏览器 | 版本 | |---|---| | Chrome | 1 | | Firefox | 1 | | Safari | 1 | | Opera | 12 | | Microsoft Edge | 12 |