css动画animation（css动画animation案例）

## CSS动画: 为网页注入生命力 ### 简介CSS动画允许我们创建各种动画效果，为网页元素添加动态变化，而无需依赖JavaScript。通过简单的CSS代码，就可以实现元素的移动、旋转、缩放、颜色渐变等效果，使网页更加生动有趣，提升用户体验。### CSS动画的实现方式CSS动画主要通过以下两种方式实现:

过渡动画（transition）

: 用于实现元素在两种状态之间进行平滑的过渡效果。

关键帧动画（animation）

: 用于创建更复杂的动画序列，可以定义多个关键帧，并在每个关键帧中设置元素的不同样式，从而实现更精细的动画效果。### 一、过渡动画 (transition)#### 1.1 基本语法```css selector {transition: property duration timing-function delay; } ```

property:

指定要进行过渡的CSS属性，例如 `width`, `height`, `color`, `background-color` 等。可以使用 `all` 来指定所有可进行动画的属性。

duration:

指定过渡动画的持续时间，单位为秒 (s) 或毫秒 (ms)。

timing-function:

指定过渡动画的速度曲线，例如 `ease`, `linear`, `ease-in-out` 等。

delay:

指定过渡动画的延迟时间，单位为秒 (s) 或毫秒 (ms)。

示例:

```css .box {width: 100px;height: 100px;background-color: red;transition: width 2s ease-in-out 1s; }.box:hover {width: 200px; } ```这段代码定义了一个红色方块，当鼠标悬停在上面时，宽度会在2秒内平滑地从100px过渡到200px，并且过渡开始前会延迟1秒。#### 1.2 常用速度曲线

ease:

默认值，动画以低速开始和结束，中间加速。

linear:

动画以恒定速度进行。

ease-in:

动画以低速开始，逐渐加速。

ease-out:

动画以高速开始，逐渐减速。

ease-in-out:

动画以低速开始和结束，中间加速。#### 1.3 使用多个属性可以使用逗号分隔多个属性，为每个属性设置不同的过渡效果。

示例:

```css .box {width: 100px;height: 100px;background-color: red;transition: width 2s ease, height 1s linear; } ```### 二、关键帧动画 (animation)#### 2.1 基本语法关键帧动画需要使用 `@keyframes` 规则定义动画序列，然后使用 `animation` 属性将动画应用于元素。```css @keyframes animation-name {0% { /

初始状态样式

/ }50% { /

中间状态样式

/ }100% { /

结束状态样式

/ } }selector {animation: animation-name duration timing-function delay iteration-count direction fill-mode; } ```

@keyframes:

定义关键帧动画的规则。

animation-name:

指定动画的名称。

animation-duration:

指定动画的持续时间，单位为秒 (s) 或毫秒 (ms)。

animation-timing-function:

指定动画的速度曲线。

animation-delay:

指定动画的延迟时间，单位为秒 (s) 或毫秒 (ms)。

animation-iteration-count:

指定动画的播放次数，可以使用数字或 `infinite` 表示无限循环。

animation-direction:

指定动画的播放方向，例如 `normal` (默认值，正向播放), `reverse` (反向播放), `alternate` (交替播放), `alternate-reverse` (反向交替播放)。

animation-fill-mode:

指定动画结束后元素的样式，例如 `none` (默认值，动画结束后恢复初始样式), `forwards` (保留最后一帧的样式), `backwards` (保留第一帧的样式), `both` (根据 animation-direction 的值选择 forwards 或 backwards)。

示例:

```css @keyframes move {0% {transform: translateX(0);}50% {transform: translateX(100px);}100% {transform: translateX(0);} }.box {width: 100px;height: 100px;background-color: red;animation: move 2s ease-in-out infinite alternate; } ```这段代码定义了一个名为 `move` 的动画，该动画会使元素在水平方向上移动。动画持续时间为2秒，使用 `ease-in-out` 速度曲线，无限循环播放，并交替进行正向和反向播放。#### 2.2 使用 from/to 关键字可以使用 `from` 和 `to` 关键字代替百分比来定义关键帧，更易于理解。

示例:

```css @keyframes move {from {transform: translateX(0);}to {transform: translateX(100px);} } ```### 三、总结CSS 动画为网页带来了极大的活力和趣味性，通过简单的代码就可以实现丰富的动画效果，提升用户体验。熟练掌握过渡动画和关键帧动画的使用方法，可以让我们轻松地创建出各种炫酷的网页动画。

CSS动画: 为网页注入生命力

简介CSS动画允许我们创建各种动画效果，为网页元素添加动态变化，而无需依赖JavaScript。通过简单的CSS代码，就可以实现元素的移动、旋转、缩放、颜色渐变等效果，使网页更加生动有趣，提升用户体验。

CSS动画的实现方式CSS动画主要通过以下两种方式实现:* **过渡动画（transition）**: 用于实现元素在两种状态之间进行平滑的过渡效果。 * **关键帧动画（animation）**: 用于创建更复杂的动画序列，可以定义多个关键帧，并在每个关键帧中设置元素的不同样式，从而实现更精细的动画效果。

一、过渡动画 (transition)

1.1 基本语法```css selector {transition: property duration timing-function delay; } ```* **property:** 指定要进行过渡的CSS属性，例如 `width`, `height`, `color`, `background-color` 等。可以使用 `all` 来指定所有可进行动画的属性。 * **duration:** 指定过渡动画的持续时间，单位为秒 (s) 或毫秒 (ms)。 * **timing-function:** 指定过渡动画的速度曲线，例如 `ease`, `linear`, `ease-in-out` 等。 * **delay:** 指定过渡动画的延迟时间，单位为秒 (s) 或毫秒 (ms)。**示例:**```css .box {width: 100px;height: 100px;background-color: red;transition: width 2s ease-in-out 1s; }.box:hover {width: 200px; } ```这段代码定义了一个红色方块，当鼠标悬停在上面时，宽度会在2秒内平滑地从100px过渡到200px，并且过渡开始前会延迟1秒。

1.2 常用速度曲线* **ease:** 默认值，动画以低速开始和结束，中间加速。 * **linear:** 动画以恒定速度进行。 * **ease-in:** 动画以低速开始，逐渐加速。 * **ease-out:** 动画以高速开始，逐渐减速。 * **ease-in-out:** 动画以低速开始和结束，中间加速。

1.3 使用多个属性可以使用逗号分隔多个属性，为每个属性设置不同的过渡效果。**示例:**```css .box {width: 100px;height: 100px;background-color: red;transition: width 2s ease, height 1s linear; } ```

二、关键帧动画 (animation)

2.1 基本语法关键帧动画需要使用 `@keyframes` 规则定义动画序列，然后使用 `animation` 属性将动画应用于元素。```css @keyframes animation-name {0% { /* 初始状态样式 */ }50% { /* 中间状态样式 */ }100% { /* 结束状态样式 */ } }selector {animation: animation-name duration timing-function delay iteration-count direction fill-mode; } ```* **@keyframes:** 定义关键帧动画的规则。 * **animation-name:** 指定动画的名称。 * **animation-duration:** 指定动画的持续时间，单位为秒 (s) 或毫秒 (ms)。 * **animation-timing-function:** 指定动画的速度曲线。 * **animation-delay:** 指定动画的延迟时间，单位为秒 (s) 或毫秒 (ms)。 * **animation-iteration-count:** 指定动画的播放次数，可以使用数字或 `infinite` 表示无限循环。 * **animation-direction:** 指定动画的播放方向，例如 `normal` (默认值，正向播放), `reverse` (反向播放), `alternate` (交替播放), `alternate-reverse` (反向交替播放)。 * **animation-fill-mode:** 指定动画结束后元素的样式，例如 `none` (默认值，动画结束后恢复初始样式), `forwards` (保留最后一帧的样式), `backwards` (保留第一帧的样式), `both` (根据 animation-direction 的值选择 forwards 或 backwards)。**示例:**```css @keyframes move {0% {transform: translateX(0);}50% {transform: translateX(100px);}100% {transform: translateX(0);} }.box {width: 100px;height: 100px;background-color: red;animation: move 2s ease-in-out infinite alternate; } ```这段代码定义了一个名为 `move` 的动画，该动画会使元素在水平方向上移动。动画持续时间为2秒，使用 `ease-in-out` 速度曲线，无限循环播放，并交替进行正向和反向播放。

2.2 使用 from/to 关键字可以使用 `from` 和 `to` 关键字代替百分比来定义关键帧，更易于理解。**示例:**```css @keyframes move {from {transform: translateX(0);}to {transform: translateX(100px);} } ```

三、总结CSS 动画为网页带来了极大的活力和趣味性，通过简单的代码就可以实现丰富的动画效果，提升用户体验。熟练掌握过渡动画和关键帧动画的使用方法，可以让我们轻松地创建出各种炫酷的网页动画。