Keyframe vs Transition

Use keyframe animations when:

• You need infinite loops (marquee, spinner)

• The animation runs automatically (intro animation on a page)

• You need multiple steps/states (pulse animation)

• Simple enter or exit transitions that don't need to support interruptions (dialog, popup)

Use CSS transitions when:

• User interaction triggers the change (hover, click, etc.)

• You need smooth interruption handling (Sonner)

参数

animation

• animation-name 动画名称，利用 @keyframes 定义

• animation-duration

• animation-timing-function

  • the timing function applies to each step. We don't get a single ease for the entire animation

• animation-delay

• animation-iteration-count 动画运行多少次

  • 默认 1 次

  • 指定 infinite 代表无限循环

• animation-direction 指定动画运行的「方向」

  • 默认 normal，从指定的动画的 0% → 100% 运行

  • 指定 reverse，从 100% → 0%

  • 指定 alternate，会按照 0% → 100% → 0%

    • 注意，0% → 100% 和 100% → 0% 是两个 iteration，如果 iteration-count 设置为了 1 则这个选项等于 normal

• animation-fill-mode 指定动画开始前 / 结束后的元素样式

  • 默认 none 在动画开始前/结束后的样式为忽略动画的样式

  • 指定 forwards 在动画结束后元素保留在动画结束时的样式

  • 指定 backwards元素在动画开始前的样式为动画开始时的样式（仅当设置了 animation-delay 时有意义）

  • 指定 both = forwards + backwards

• animation-play-state 指定动画的播放状态，可以用来将动画暂停到某一刻

  • running 动画运行中（默认）

  • pause 暂停动画的运行（样式会停留在暂停的一刻，后续恢复则动画继续）