CSS动画和过渡之间的主要区别

CSS转换	CSS动画
只能从初始状态移动到最终状态-没有中间步骤 只能跑一次 需要一个触发器来运行(比如鼠标悬停) 触发时向前运行，移除触发器时反向运行 使用JavaScript更容易 最适合创建从一个状态到另一个状态的简单更改	能从初始状态移动到最终状态，中间有中间步骤吗 可以无限循环感谢动画-迭代-计数属性 可以触发但也可以自动运行 可以向前跑，反向跑，或者交替跑 使用JavaScript更困难 最适合创造一系列复杂的动作

空格键反例

在下面的例子中，由于CSS和JavaScript的结合，用户点击空格键的次数被“记录”了下来。当用户点击重启按钮时，该数字将返回到0。

图片来源

按钮的例子

当鼠标悬停在下面的元素上时，箭头变成了一个矩形，因此文本“Let’s go!”看起来像一个按钮。

图片来源

CSS转换失败

如果你已经创建了一个过渡，但它没有按照预期工作，你可以寻找一些快速修复。

1.转换属性设置为none。

如上所述，transition-property属性指定了转换应用到的CSS属性的名称。这个属性可以通过关键字“all”定义，该关键字表示所有属性都要转换，也可以通过要转换的属性列表来定义。但是，如果属性被设置为“none”，那么没有属性将转换。

2.未定义转换持续时间，或将其设置为零或负值。

如上所述，transition-duration属性指定转换所花费的时间长度。它可以设置为任何正值。如果未定义属性，则该值将被视为零秒。元素仍然会从一种状态变化到另一种状态，但这种变化是即时的——不会发生动画。

负值表示声明无效，因此会假定该属性没有定义。

为了理解这个效果，请比较下面两种转换效果。

看到这支笔作者:Christina Perricone (@hubspot)CodePen．

什么时候使用过渡和动画

让我们回顾一下在动画上使用过渡的理想用例:

• 创建简单的从到动作
• 只有当用户通过鼠标悬停或单击元素与元素交互时才会产生效果
• 使用JavaScript
• 当用户将鼠标悬停在按钮上时，设计可以改变按钮颜色或大小的按钮

CSS动画

动画更复杂，但也会给你更多的灵活性-更灵活，更多的部分涉及。使用CSS动画，您可以设置不同的阶段，在元素持续时间内多次改变元素的行为。这让你可以更多地控制动画中的属性值。

为此，您需要定义一组关键帧。关键帧表示动画的开始和结束，以及开始和结束之间的任何中间步骤。换句话说，每个关键帧都描述了动画元素在动画序列中的给定时间应该如何渲染。你可以设置任意多的关键帧(但你至少需要两个)。

有了这些功能，你就可以创造出HTML5动画，与Flash等高级工具所创造的动画相媲美。

动画还可以让你在每个关键帧中指定属性值，而不必声明它们。一旦到达正确的关键帧，元素就会平滑地改变行为，即使属性在开始时没有列出。

CSS动画属性

要创建转换，您可以使用简写的animation属性，或者下面的子属性的组合。

只需要animation-name和animation-duration属性。如果没有指定其他属性，那么它们将被设置为默认值。

• animation-name:指定动画的类型，是必需的。
• 动画:指定动画序列的时间长度。
• animation-timing-function:设定动画的节奏。
• animation-delay:指定动画开始的时间。可以使用毫秒或秒，正数或负数。
• 动画方向:定义动画的方向。
• animation-fill-mode:指定动画样式是在动画播放之前还是之后应用。
• animation-iteration-count:指定动画播放的次数。
• animation-play-state:用于暂停和恢复动画序列。

循环CSS动画

与只在被触发后播放一次的过渡动画不同，CSS动画不需要触发动作，可以设置为循环。你可以想重复多少次就重复多少次，也可以让它永远持续下去。您可以使用animation-iteration-count属性，该属性允许您以秒数或无限．

有一个不那么直接的方法来实现CSS过渡循环transitionEnd事件。然而，如果你喜欢添加一个循环，CSS动画会更容易。

CSS动画的例子

下面是一个CSS动画的例子。图像会经过多种状态并循环。蒸汽体积缩小，上升，然后消失。这个图像比CSS转换更加动态。