CSS 动画和过渡

过渡 (Transition)

平滑改变属性值。

基本语法

.element {
  transition: property duration timing-function delay;
}

属性

• property：要过渡的属性 (all, width, opacity 等)
• duration：持续时间 (2s, 500ms)
• timing-function：缓动函数 (ease, linear, ease-in-out)
• delay：延迟时间

例子

.box {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s ease-in-out;
}

.box:hover {
  width: 200px;
}

动画 (Animation)

更复杂的动画序列。

定义动画

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

使用动画

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

属性

• animation-name：关键帧名称
• animation-duration：持续时间
• animation-timing-function：缓动
• animation-delay：延迟
• animation-iteration-count：重复次数 (infinite)
• animation-direction：方向 (normal, reverse, alternate)

性能优化

• 使用 transform 和 opacity
• 避免改变布局属性
• 使用 will-change 属性

总结

CSS 动画简单高效。过渡适合简单变化，动画适合复杂序列。