CSS 中的动画属性与过渡属性：有何差异？

2023-11-06 10:31:48

在 CSS 中，我们经常使用动画和过渡来创建视觉效果。虽然两者都能实现动画效果，但它们在功能和应用场景上却有所不同。让我们深入了解一下 animation 和 transition 属性，并比较它们的差异。

动画与过渡：从概念到应用

动画 (animation)

定义：animation 属性用于创建持续时间更长、更复杂的动画效果。
特点：
- 允许定义动画的持续时间、延迟、循环次数、方向等属性。
- 使用关键帧 (keyframes) 定义动画的开始和结束状态，从而实现更复杂的效果。
- 适用于改变元素的多个属性，如位置、颜色、大小等。
代码示例：

@keyframes example {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(100px);
    }
    100% {
        transform: translateX(0);
    }
}

.element {
    animation: example 2s infinite;
}

这段代码创建了一个无限循环的动画，将元素在水平方向上移动 100 像素，然后返回到原始位置。

过渡 (transition)

定义：transition 属性用于创建更简单的动画效果，通常涉及元素的一个或多个属性的平滑过渡。
特点：
- 允许定义过渡的持续时间、延迟和缓动函数。
- 通常用于改变元素的单个属性，如颜色、透明度、大小等。
- 可以应用于悬停、聚焦、鼠标悬停等事件。
代码示例：

.element {
    transition: color 2s ease-in-out;
}

.element:hover {
    color: red;
}

这段代码将元素的颜色从默认值过渡到红色，并在鼠标悬停时触发该过渡。

何时使用 animation 和 transition？

使用 animation 的场景：
- 需要创建持续时间更长的动画，例如元素的移动、旋转、缩放等。
- 需要实现复杂的动画效果，例如元素的淡入淡出、颜色变化、形状变化等。
- 需要对多个元素的多个属性进行动画处理。
使用 transition 的场景：
- 需要创建简单的动画效果，例如元素的颜色、透明度、大小等的变化。
- 需要实现简单的交互效果，例如元素的悬停、聚焦等。
- 需要对单个元素的单个属性进行动画处理。