CSS动画教程

从基础概念到高级应用的完整指南

什么是CSS动画？

CSS动画允许我们在不使用JavaScript的情况下，为HTML元素添加动态效果。通过CSS动画，我们可以创建从简单的悬停效果到复杂的交互动画等各种动态效果。

基础概念

1. CSS Transitions

过渡是最简单的动画形式，用于在属性值改变时提供平滑的过渡效果。

悬停查看效果

.transition-box {
    transition: all 0.3s ease;
}
.transition-box:hover {
    transform: scale(1.1);
}

2. CSS Transforms

变换允许你旋转、缩放、倾斜或平移元素。

旋转
缩放
倾斜
平移

3. CSS Animations

动画允许你创建更复杂的动态效果，可以定义关键帧和动画序列。

动画示例

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

高级应用

4. 动画时间函数

不同的缓动函数可以创造出不同的动画效果：

ease
linear
ease-in
ease-out

5. 组合动画

将多个动画效果组合在一起可以创建更复杂的动画：

复杂动画示例

最佳实践