12、CSS 动画，transition 和 animation，哪一个性能更好

CSS 过渡适合简单的效果，而 CSS 动画则适合更复杂的动画场景。

1. CSS Transition

CSS 过渡是一种在两个状态之间平滑切换的技术，通常用于简单的动态效果，比如按钮的悬停状态、元素的显示和隐藏等。以下是使用 CSS 过渡的基本步骤：

• 定义初始状态：设置元素的初始样式。
• 定义目标状态：设置元素在特定动作（如 hover、focus 等）触发后的目标样式。
• 设置过渡属性：使用 transition 属性指定哪些样式将发生过渡，以及过渡的持续时间和效果。

2. CSS Animation

CSS 动画比过渡更为强大，它允许你创建更复杂的动画效果，通过 @keyframes 定义完整的动画序列，可以自动触发或循环播放，支持更复杂的时序控制。

• 定义动画序列：使用 @keyframes 规则定义动画的各个阶段。
• 应用动画：将动画应用到元素上，设置动画的名称、持续时间、迭代次数等。