CSS 过渡与 CSS 动画

Posted 2023-03-06

【中文标题】CSS 过渡与 CSS 动画

【英文标题】：CSS Transition vs CSS Animation

【发布时间】：2020-03-20 09:48:11

【问题描述】：

CSS 过渡和 CSS 动画之间的技术区别在哪里？

动画（带有关键帧）是否由多个过渡组成？

关键帧是否支持唯一的区别？

它们都是硬件加速的吗？

【问题讨论】：

相关帖子 - CSS: Animation vs. Transition

【参考方案1】：

它们都是硬件加速的吗？

-- 是的，两者都是硬件加速的。

其他问题请参考本站

https://cssanimation.rocks/transition-vs-animation/

【讨论】：

你的链接基本上说“动画比过渡更强大，因为关键帧”我的问题是：“除了关键帧还有其他区别吗？”

不，根据浏览器和硬件加速，两者都充满动力，但总的来说，如果我们使用高度关键的帧制作复杂的动画，我会发现一些滞后......

【参考方案2】：

过渡：

在两个不同的状态之间执行转换：开始状态和结束状态。转场还需要触发事件，如hover、focus等。转场多用于简单的动画。

动画：

与过渡不同，动画可用于无限动画并且具有两种以上的状态 (@keyframes)。它们也没有界限。

两者都使用 CPU 加速以获得更流畅的效果。