css动画（css动画transform）

## CSS 动画：赋予网页活力### 1. 简介CSS 动画可以让网页元素动起来，带来更生动的用户体验。无需借助 JavaScript，你就能轻松创建各种效果，如元素的移动、缩放、旋转、淡入淡出等。### 2. 关键帧与动画属性#### 2.1 关键帧 @keyframes`@keyframes` 规则定义动画的步骤。你可以通过多个关键帧来描述元素在不同时间点的状态。```css @keyframes myAnimation {0% {transform: translateX(0);}50% {transform: translateX(100px);}100% {transform: translateX(0);} } ```这段代码定义了一个名为 `myAnimation` 的动画。它包含三个关键帧：-

0%

: 元素在动画开始时的状态，此时没有水平偏移 (`translateX(0)`)。 -

50%

: 元素在动画进行到一半时的状态，此时水平偏移了 100 像素 (`translateX(100px)`)。 -

100%

: 元素在动画结束时的状态，此时回到了初始位置 (`translateX(0)`)。#### 2.2 动画属性 animation`animation` 属性用来将关键帧应用于元素，它是一个复合属性，包含多个子属性：- `animation-name`: 动画名称，用于引用 `@keyframes` 规则定义的动画。 - `animation-duration`: 动画持续时间，单位为秒或毫秒。 - `animation-timing-function`: 动画的运动曲线，例如 `ease`、`linear`、`ease-in` 等。 - `animation-delay`: 动画延迟时间，单位为秒或毫秒。 - `animation-iteration-count`: 动画循环次数，可以是数字或 `infinite`。 - `animation-direction`: 动画方向，可以是 `normal` 或 `reverse`。 - `animation-fill-mode`: 动画结束后元素的样式，可以是 `none`、`forwards`、`backwards` 或 `both`。```css .box {animation-name: myAnimation;animation-duration: 2s;animation-iteration-count: infinite; } ```这段代码将 `myAnimation` 动画应用于 `.box` 元素，动画持续 2 秒，无限循环。### 3. 常用动画效果#### 3.1 移动 (translate)通过 `transform: translateX(x) translateY(y)` 属性可以控制元素在水平和垂直方向上的移动。#### 3.2 缩放 (scale)通过 `transform: scaleX(x) scaleY(y)` 属性可以控制元素在水平和垂直方向上的缩放。#### 3.3 旋转 (rotate)通过 `transform: rotate(angle)` 属性可以控制元素绕 Z 轴旋转，单位为度。#### 3.4 淡入淡出 (opacity)通过 `opacity` 属性可以控制元素的透明度，从 0 到 1 代表从完全透明到完全不透明。### 4. 示例```html

```这段代码创建了一个红色方块，它会水平移动 200 像素并放大 1.2 倍，然后回到初始状态，动画无限循环。### 5. 总结CSS 动画为网页设计提供了更多可能性，可以让你的网页更加生动有趣。通过学习关键帧、动画属性和常用动画效果，你可以轻松创建出各种炫酷的动画效果，提升网页的视觉体验。

CSS 动画：赋予网页活力

1. 简介CSS 动画可以让网页元素动起来，带来更生动的用户体验。无需借助 JavaScript，你就能轻松创建各种效果，如元素的移动、缩放、旋转、淡入淡出等。

2. 关键帧与动画属性

2.1 关键帧 @keyframes`@keyframes` 规则定义动画的步骤。你可以通过多个关键帧来描述元素在不同时间点的状态。```css @keyframes myAnimation {0% {transform: translateX(0);}50% {transform: translateX(100px);}100% {transform: translateX(0);} } ```这段代码定义了一个名为 `myAnimation` 的动画。它包含三个关键帧：- **0%**: 元素在动画开始时的状态，此时没有水平偏移 (`translateX(0)`)。 - **50%**: 元素在动画进行到一半时的状态，此时水平偏移了 100 像素 (`translateX(100px)`)。 - **100%**: 元素在动画结束时的状态，此时回到了初始位置 (`translateX(0)`)。

2.2 动画属性 animation`animation` 属性用来将关键帧应用于元素，它是一个复合属性，包含多个子属性：- `animation-name`: 动画名称，用于引用 `@keyframes` 规则定义的动画。 - `animation-duration`: 动画持续时间，单位为秒或毫秒。 - `animation-timing-function`: 动画的运动曲线，例如 `ease`、`linear`、`ease-in` 等。 - `animation-delay`: 动画延迟时间，单位为秒或毫秒。 - `animation-iteration-count`: 动画循环次数，可以是数字或 `infinite`。 - `animation-direction`: 动画方向，可以是 `normal` 或 `reverse`。 - `animation-fill-mode`: 动画结束后元素的样式，可以是 `none`、`forwards`、`backwards` 或 `both`。```css .box {animation-name: myAnimation;animation-duration: 2s;animation-iteration-count: infinite; } ```这段代码将 `myAnimation` 动画应用于 `.box` 元素，动画持续 2 秒，无限循环。

3. 常用动画效果

3.1 移动 (translate)通过 `transform: translateX(x) translateY(y)` 属性可以控制元素在水平和垂直方向上的移动。

3.2 缩放 (scale)通过 `transform: scaleX(x) scaleY(y)` 属性可以控制元素在水平和垂直方向上的缩放。

3.3 旋转 (rotate)通过 `transform: rotate(angle)` 属性可以控制元素绕 Z 轴旋转，单位为度。

3.4 淡入淡出 (opacity)通过 `opacity` 属性可以控制元素的透明度，从 0 到 1 代表从完全透明到完全不透明。

4. 示例```html

```这段代码创建了一个红色方块，它会水平移动 200 像素并放大 1.2 倍，然后回到初始状态，动画无限循环。

5. 总结CSS 动画为网页设计提供了更多可能性，可以让你的网页更加生动有趣。通过学习关键帧、动画属性和常用动画效果，你可以轻松创建出各种炫酷的动画效果，提升网页的视觉体验。