Skip to main content

CSS 动画详解

1. Transition 过渡​

最基本的动画效果，用于平滑地改变 CSS 属性。

Hover Me!
.box {
  transition: all 0.3s ease;
}

.box:hover {
  transform: scale(1.1);
  background: #2980b9;
}

过渡属性​

  • transition-property: 指定要过渡的属性
  • transition-duration: 过渡持续时间
  • transition-timing-function: 过渡时间函数
  • transition-delay: 过渡延迟时间

2. Keyframe Animation 关键帧动画​

可以定义动画的多个状态。

.ball {
  animation: bounce 1s infinite;
}

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

动画属性​

  • animation-name: 动画名称
  • animation-duration: 持续时间
  • animation-timing-function: 时间函数
  • animation-delay: 延迟时间
  • animation-iteration-count: 重复次数
  • animation-direction: 动画方向
  • animation-fill-mode: 动画前后的状态
  • animation-play-state: 播放状态

3. Transform 变换​

用于元素的 2D 或 3D 转换。

Hover for 3D Transform
.box {
  transform: rotateY(180deg);
  transition: transform 0.5s;
}

常用变换​

  • translate(x, y): 平移
  • scale(x, y): 缩放
  • rotate(angle): 旋转
  • skew(x-angle, y-angle): 倾斜
  • matrix(): 矩阵变换

4. 实用动画示例​

Loading 动画​

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

组合动画效果​

Animated Card

Hover me to see multiple effects!

.card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

/* 闪光效果 */
.card::before {
  content: '';
  position: absolute;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shine 0.5s ease-in-out;
}

5. 性能优化​

1. 使用 transform 和 opacity​

/* 好的实践 */
.box {
  transform: translate(0, 100px);
  opacity: 0.5;
}

/* 避免使用 */
.box {
  left: 100px;
  background: rgba(0,0,0,0.5);
}

2. 使用 will-change​

.box {
  will-change: transform;
}

3. 使用 GPU 加速​

.box {
  transform: translateZ(0);
}

6. 响应式动画​

根据不同设备和用户偏好展示不同的动画效果：

Responsive Animation

Resize window to see different animations

桌面端 (>768px)​

  • 悬浮效果
  • 脉冲动画

平板端 (480px-768px)​

  • 点击反馈
  • 旋转动画

移动端 ( < 480px)​

  • 垂直布局
  • 弹跳动画

代码实现​

/* 桌面端 */
@media (min-width: 768px) {
  .card:hover {
    transform: translateY(-5px) scale(1.02);
  }
}

/* 平板端 */
@media (max-width: 768px) {
  .card:active {
    transform: scale(0.98);
  }
}

/* 移动端 */
@media (max-width: 480px) {
  .card {
    flex-direction: column;
  }
}

/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
    transition: none;
  }
}