Use CSS animations when:

• You need a simple hover effect.

• You need to animate an element in or out.

  • 注：CSS 元素缺失「当元素从 DOM 移除时播放动画」的能力

    • Radix listens for animationstart event and suspends the removal of an element until the exit animation is finished.

      • https://www.npmjs.com/package/@radix-ui/react-presence

      • https://github.com/radix-ui/primitives/tree/main/packages/react/presence

• You have an infinite, linear animation like a marquee.

• You have a bundle-size sensitive project.

Use Framer Motion/other animation library when:

• You need to create complex animations.

• You want to make your animations feel more sophisticated.

• You want your animations to be interruptible and feel natural.

https://motion.dev/blog/do-you-still-need-framer-motion