前端 CSS 面试题, CSS 中 transition 和 animation 的区别
前端 CSS 面试题, CSS 中 transition 和 animation 的区别
QA
Step 1
Q:: CSS 中 transition 和 animation 的区别是什么？
A:: transition 和 animation 都是用来实现 CSS 动画效果的，但它们有一些关键的区别。transition 是用于在两个状态之间的过渡动画，通常需要触发事件（如 hover、focus）才能生效。它只能定义开始和结束的状态。animation 则可以创建复杂的多步骤动画，能够自动开始、重复播放，甚至定义关键帧 (keyframes) 来控制动画的每一步进程。animation 更灵活，适合更复杂的动画需求。
Step 2
Q:: transition 属性有哪些？
A:: transition 属性包括 transition-property（要过渡的 CSS 属性），transition-duration（过渡持续时间），transition-timing-function（过渡时间函数，如线性、缓入缓出），以及 transition-delay（过渡延迟时间）。这些属性可以单独设置，也可以通过简写形式一起设置。
Step 3
Q:: animation 属性有哪些？
A:: animation 属性包括 animation-name（动画的名称，与 keyframes 对应），animation-duration（动画持续时间），animation-timing-function（动画时间函数），animation-delay（动画延迟时间），animation-iteration-count（动画播放次数，可以设置为无限次），animation-direction（动画方向，正向、反向或交替），以及 animation-fill-mode（动画结束后的状态）。这些属性可以单独设置，也可以通过简写形式一起设置。
Step 4
Q:: 什么时候应该使用 transition 而不是 animation？
A:: 如果只需要在两个状态之间进行简单的过渡，并且动画仅在特定事件发生时触发，使用 transition 更为合适。它可以帮助减少不必要的复杂性。而当需要实现复杂的、精确控制的动画效果，或需要自动和重复播放的动画时，animation 更为合适。
Step 5
Q:: 你如何调试复杂的 CSS 动画？
A:: 调试复杂的 CSS 动画时，可以借助浏览器的开发者工具（如 Chrome DevTools）查看动画的关键帧、计算的样式和实际效果。也可以通过将动画的持续时间设为无限长，手动调整关键帧，甚至使用 JavaScript 进行动态控制来调试。分析性能瓶颈时，可以检查动画的帧率和重绘情况，以避免性能问题。