CSS 动画基础

CSS 动画主要有两种实现方式：

Transition（过渡）

适合简单的状态变化：

1
2
3
4
5
6
7

.button {
    transition: transform 0.3s ease;
}

.button:hover {
    transform: translateY(-2px);
}

Animation（关键帧动画）

适合复杂的动画序列：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

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

.element {
    animation: float 3s ease-in-out infinite;
}

性能优化技巧

  1. 使用 transform 和 opacity - 这些属性不会触发重排
  2. 添加 will-change - 提示浏览器优化
  3. 使用 GPU 加速 - transform: translate3d(0, 0, 0)

实用动画效果

  • 悬停抬升效果
  • 渐变背景动画
  • 加载动画
  • 页面过渡效果

掌握这些技巧，让你的网页动起来！