CSS 动画与过渡

### CSS 动画与过渡

CSS 动画和过渡是现代网页设计中非常重要的视觉增强工具。它们可以为用户界面添加平滑的交互效果，提升用户体验。以下是关于过渡（Transition）和动画（Animation）的详细介绍，包括基本概念、属性和应用案例。

------

#### 1. 过渡（Transition）

过渡是一种在元素状态之间平滑切换的技术。它允许你定义一个属性的变化过程，并指定变化的时间和方式。

##### （1）`transition` 属性

`transition` 是一个复合属性，用于定义过渡效果。它包括以下子属性：

- `transition-property`：指定哪些属性需要过渡。
- `transition-duration`：过渡的持续时间。
- `transition-timing-function`：过渡的动画曲线（如 `linear`、`ease`、`ease-in`、`ease-out`）。
- `transition-delay`：过渡的延迟时间。

**简写形式**：

css复制

```css
transition: property duration timing-function delay;
```

##### （2）示例

css复制

```css
button {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease; /* 定义过渡效果 */
}

button:hover {
    background-color: #0056b3; /* 鼠标悬停时背景变暗 */
    transform: scale(1.1); /* 鼠标悬停时放大按钮 */
}
```

------

#### 2. 动画（@keyframes）

动画是通过定义一系列关键帧（`@keyframes`）来实现更复杂的视觉效果。每个关键帧定义了动画在特定时间点的状态。

##### （1）`@keyframes` 规则

`@keyframes` 是定义动画的关键帧序列。每个关键帧使用百分比或关键字（如 `from` 和 `to`）来指定动画的起始和结束状态。

**语法**：

css复制

```css
@keyframes animation-name {
    from { /* 动画开始时的状态 */ }
    to { /* 动画结束时的状态 */ }
}
```

或

css复制

```css
@keyframes animation-name {
    0% { /* 动画开始时的状态 */ }
    50% { /* 动画中间状态 */ }
    100% { /* 动画结束时的状态 */ }
}
```

##### （2）动画属性

- `animation-name`：指定动画的名称（即 `@keyframes` 的名称）。
- `animation-duration`：动画的持续时间。
- `animation-timing-function`：动画的缓动函数。
- `animation-delay`：动画的延迟时间。
- `animation-iteration-count`：动画的播放次数（如 `infinite` 表示无限循环）。
- `animation-direction`：动画的播放方向（如 `normal`、`reverse`、`alternate`）。
- `animation-fill-mode`：动画结束后的状态（如 `forwards`、`backwards`）。

**简写形式**：

css复制

```css
animation: name duration timing-function delay iteration-count direction fill-mode;
```

##### （3）示例

css复制

```css
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    opacity: 0; /* 初始状态透明 */
    animation: fadeIn 2s ease-in forwards, bounce 1s ease infinite;
}
```

------

#### 3. 动画案例分析

##### （1）淡入淡出效果

css复制

```css
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

div {
    opacity: 0;
    animation: fadeIn 2s ease-in forwards;
}
```

##### （2）无限循环的弹跳效果

css复制

```css
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

div {
    animation: bounce 1s ease infinite;
}
```

##### （3）旋转动画

css复制

```css
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

div {
    animation: rotate 2s linear infinite;
}
```

##### （4）复杂动画组合

css复制

```css
@keyframes complex {
    0% { transform: scale(1) translateX(0); opacity: 1; }
    50% { transform: scale(1.2) translateX(100px); opacity: 0.5; }
    100% { transform: scale(1) translateX(0); opacity: 1; }
}

div {
    animation: complex 3s ease-in-out infinite;
}
```

------

#### 4. 总结

- **过渡（Transition）**：
  - 用于在两个状态之间平滑切换。
  - 常见属性：`transition-property`、`transition-duration`、`transition-timing-function`、`transition-delay`。
- **动画（Animation）**：
  - 通过 `@keyframes` 定义一系列关键帧。
  - 常见属性：`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-iteration-count`、`animation-direction`、`animation-fill-mode`。

通过合理使用过渡和动画，可以为网页添加丰富的视觉效果，增强交互性和用户体验。