CSS上的动画和过渡效果

Question

我与他们合作，我理解代码，但动画效果和过渡效果之间的差异不是。

因为我认为动画效果只是风格上的即时动画？ 转换效果是mhm，只是控制动画开始和结束后的不同时间点？

感谢您的帮助，但我在W3​​C，其他论坛，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

• 转换是针对状态变化的。菜单打开一个接近的例子。

• 如果您想要相同的irespective状态更改并拥有更多控制权 然后你必须使用动画。

  

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

     

动画：赋予生命或生命品质;充满   运动

Answer 3

此处的链接很好地解释了它：Animation vs Transition

它提出了一些观点：

  

的相似性

     

指定要在

上侦听更改的CSS属性      

设置计时（缓和）功能以改变从一个属性开始的速率     价值到另一个

     

指定持续时间以控制动画的持续时间     或过渡将采取

     

以编程方式收听动画和     特定于转换的事件，您可以随意使用

     

可视化CSS属性更改。

然后差异：

  

的差异

     

动画和过渡显示了它们在触发它们的方式上的差异，它们是否容易循环，如何   您可以定义过渡的复杂程度，您必须具备的正式程度   能够使用它们，以及它们与JavaScript的结合程度。让我们   更详细地探索这些主题。 （看链接）

结论：

  

结论

     

如果我想要的话需要多个人提供的灵活性   关键帧和简单的循环，然后我去动画。

     

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

     

如果我   想要操纵我希望使用动画制作的属性值   JavaScript，我进行过渡。

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