CSS上的动画和过渡效果

Question

我与他们一起工作，并且我理解代码，但是动画效果和过渡效果之间的区别却不明显。

就像我的动画效果一样，样式上有即时动画吗？ 过渡效果mhm，仅控制自动画开始和结束以来的不同时间点吗？

感谢您的帮助，但是我在W3C，其他论坛，mozilla文档上阅读，并且我不理解它们之间的区别。

Answer 1

Animations can repeat any number of times
Animations can be specified to go in a forward and reverse direction
Animations can have any number of defined intermediate steps, called “keyframes”, but transitions only have a defined start and end “keyframes”.
With transitions we can specify an animation for any property which changes, using the all keyword. With animations, we need to specify every property we want animated.

过渡：从一个阶段移动到另一个具有CSS属性的阶段，它也具有持续时间

过渡是发生在更改之间的动画。 在CSS3之前，当元素在网页上更改时，它处于一种状态或另一种状态。 例如，如果将一个按钮更改为鼠标悬停按钮，则该按钮开始于关闭状态，而结束于开启状态。 您可以将任何CSS属性从一种状态转换为另一种状态。 这意味着可以创建运动效果（通过在一个位置和另一位置之间过渡），模糊效果（通过过渡颜色）等等。

Answer 2

• 过渡用于状态更改。 菜单打开一个关闭示例。

• 如果您想要相同的状态变化并对其有更多控制，则必须使用动画。

过渡：从一种形式，阶段或样式到另一种形式的运动，发展或演变

动画：具有生命或生活品质； 充满动感

Answer 3

这里的链接对此进行了很好的解释： 动画与过渡

它提出了一些要点：

相似点

指定要监听更改的CSS属性

设置计时（缓动）功能以更改从一个属性值转到另一个属性值的速率

指定持续时间以控制动画或过渡需要多长时间

以编程方式收听动画和特定于过渡的事件，然后可以根据需要进行处理

可视化CSS属性更改。

然后区别：

差异性

当涉及到如何触发它们播放，它们是否容易循环播放，可以定义的过渡有多么复杂，能够使用它们的方式必须多么正式以及它们在JavaScript中的表现如何时，动画和过渡会显示出它们的差异。 。 让我们更详细地探讨这些主题。 （看链接）

结论：

结论

如果我想要通过多个关键帧和轻松循环来提供灵活性，那么我可以制作动画。

如果我正在寻找一个简单的从/到动画，我会进行过渡。

如果我想使用JavaScript操纵要设置动画的属性值，则可以进行过渡。

请查看该链接，因为它会更详细。