CSS动画与过渡：从平滑过渡到炫酷动画

1. 过渡效果：让状态变化更自然

过渡(transition)是CSS中实现元素从一种状态平滑过渡到另一种状态的技术，避免了突兀的样式变化。

核心属性

transition: property duration timing-function delay;

• property：要过渡的CSS属性（如all、opacity、transform）
• duration：过渡持续时间（如0.3s、500ms）
• timing-function：缓动函数（如ease、linear、cubic-bezier()）
• delay：过渡延迟时间（可选）

实用示例

.button {
  background-color: #3498db;
  transition: background-color 0.3s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.button:hover {
  background-color: #2980b9;
  transform: scale(1.05);
}

缓动函数详解

缓动函数决定了动画的速度曲线：

实践建议：

• 使用cubic-bezier(0.4, 0, 0.2, 1)替代默认的ease，能获得更自然的动画效果
• 过渡时间控制在0.2s-0.5s之间，过长的动画会让用户感到不耐烦

2. 关键帧动画：创建复杂动画序列

关键帧动画通过@keyframes定义动画序列，比过渡更灵活强大。

基本语法

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.element {
  animation: slideIn 0.5s ease-out;
}

动画属性详解

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

• name：@keyframes定义的动画名称
• duration：动画持续时间
• timing-function：缓动函数
• delay：延迟时间
• iteration-count：重复次数（infinite表示无限循环）
• direction：播放方向（normal、reverse、alternate）
• fill-mode：动画前后如何应用样式（forwards、backwards）

多关键帧示例

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

.ball {
  animation: bounce 1s ease-in-out infinite;
}

实践建议：

• 使用will-change: transform提示浏览器优化动画性能
• 避免同时激活过多动画，可能导致页面卡顿
• 考虑使用prefers-reduced-motion媒体查询为偏好减少动画的用户提供替代方案

3. 变形与3D效果：创造视觉深度

CSS的transform属性允许你对元素进行旋转、缩放、移动或倾斜。

2D变形

.element {
  transform: translate(50px, 100px) rotate(45deg) scale(1.2) skew(10deg);
}

3D变形

要启用3D空间，需要设置透视：

.container {
  perspective: 1000px;
}

.card {
  transform: rotateY(30deg);
  transform-style: preserve-3d;
}

3D变换函数

• rotateX(), rotateY(), rotateZ(), rotate3d()
• translateZ(), translate3d()
• scaleZ(), scale3d()

实践建议：

• 3D变换消耗较多资源，谨慎使用
• 为获得流畅的60fps动画，优先使用transform和opacity属性
• 考虑使用backface-visibility: hidden处理3D元素的背面

综合示例：3D卡片翻转效果

<div class="scene">
  <div class="card">
    <div class="card-face front">Front</div>
    <div class="card-face back">Back</div>
  </div>
</div>

.scene {
  width: 200px;
  height: 260px;
  perspective: 1000px;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.back {
  transform: rotateY(180deg);
}

.scene:hover .card {
  transform: rotateY(180deg);
}

性能优化建议

1. 优先使用transform和opacity：这两个属性可以由GPU加速
2. 避免动画触发重排：如改变width/height/left/top等
3. 合理使用will-change：提前告知浏览器哪些元素会变化
4. 减少动画数量：同时运行的动画不超过3-5个
5. 使用requestAnimationFrame：对于复杂动画，考虑使用JavaScript配合

通过合理运用CSS动画与过渡，可以显著提升用户体验，但记住"少即是多"的原则，过度使用动画反而会分散用户注意力。