CSS 动画：加载动画

CSS 动画

CSS 提供两种动画方式：Transition（过渡） 和 Animation（关键帧动画）。

Transition 过渡

用于属性变化时的平滑过渡（需要触发条件，如 hover）。

.button {
  background: #3b82f6;
  transition: background 0.3s ease, transform 0.2s;
}
.button:hover {
  background: #2563eb;
  transform: scale(1.05);
}

Animation 关键帧动画

可以定义多步动画，自动播放，无需触发。

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

.spinner {
  animation: spin 1s linear infinite;
}

何时用哪个？