CSS3：动画与过渡 animations transitions 区别

在CSS中，您可以使用两种可视化技术来改变您的注意力： 动画和 转换。在这篇文章中，我们来看看它们之间的相似之处和区别，以便您可以知道何时使用它们。

为了充分利用这篇文章，您将有助于您熟悉使用动画和转换。如果您没有机会让他们的手变脏， 创建简单的CSS动画和 查看CSS3转换   教程将帮助您开始使用。

相似

从远处，动画和转场都非常相似。他们都允许你：

• 指定要监听更改的CSS属性
• 设置时间（宽松）功能来改变从一个属性值到另一个属性值的速率
• 指定持续时间来控制动画或转换将需要多长时间
• 以编程方式聆听您可以随意使用的动画和特定于特定过渡的事件
• 可视化CSS属性更改。

除此之外，你会看到动画和过渡分歧一点，让他们的独特性发光。让我们更详细地看看这些独特的品质。

差异

动画和过渡显示了它们如何触发他们玩耍的区别，无论它们是否容易循环，您可以定义的过渡的复杂程度，使用它们的正确程度以及使用JavaScript的程度如何。 。让我们更详细地探讨这些话题。

触发

动画和转换之间的主要差异之一可以在你如何触发他们开始播放时看到。

一个转换只会作为一个改变的CSS属性的反应。常见的情况是您使用 ：hover伪类来更改CSS属性的值：

要使用在这里可视化的示例，如果定义了转换，您将可以看到圆圈从正常大小增长到其悬浮尺寸。触发转换的另一种方法是使用JavaScript以 编程方式添加或删除CSS类来模拟CSS属性更改。整理我们进行财产更改的方式，您可以使用JavaScript设置内联样式，以更改转换正在侦听的属性。

另一方面，动画不需要任何明确的触发。一旦定义了动画，它将开始自动播放。是的，这就是动画如何滚动！

循环

这很简单 通过设置animation-iteration-count 属性可以轻松地进行动画循环。您可以指定您想要动画重复的固定次数：

如果你只是希望你的动画循环永远，你也可以这样做：

另一方面，转换没有指定可运行多少次的属性。触发时，转换只运行一次。您可以通过使用transitionEnd事件进行过渡循环 ，但这并不是特别简单 – 特别是与动画相比。

定义中间点/关键帧

使用动画，您可以定义关键帧，使您可以更多地控制CSS属性值，而不仅仅是开始和结束：

您可以根据需要设置多个关键帧，并且当您的动画播放时，每个关键帧将被反映的指定属性更改。这样，您可以创建各种涉及的动画，帮助HTML5更有效地与更成熟的动画技术（如Flash）进行竞争。

有了转型，你对任何超出最终结果的任何事情都没有太多的控制：

转换只是从初始状态到最终状态。你不能指定任何点之间，你可以与动画，所以转换可能不是一个好选择，如果你想创建下一个 青少年女孩小队的感觉或一个复杂的动画。

上前指定属性

接下来我将要介绍的是，在定义CSS属性值之间的转换时，正式的动画和转换是如何的。

在正式的一面，你有过渡。必须明确表示您要转换的每个CSS属性。

例如，假设你有如下的东西：

悬停时，我为背景颜色和 宽度指定了不同的值 。我的转换只 指定背景颜色。这意味着您的浏览器只会监听 background-color属性的更改。

如果我希望我的转换影响 背景颜色和宽度 属性，我将需要明确地添加另一个 转换条目 宽度：

使用动画，您可以在每个关键帧中指定属性，而无需执行类似于声明它们的任何操作：

在这个例子中，任何我动画的元素的高度和 背景颜色将在达到相应的关键帧时顺利过渡 – 即使该属性从未在之前列出过！

与JavaScript交互

在许多情况下，您在CSS中声明的转换或动画将足够好。您可以在CSS中指定起始值，结束值以及您希望属性所需的任何中间值。您的动画或转换将会读取这些值，并从那里处理业务。当您想要做的是预定义的时候，这种情况最有效。有时你想根据一些外部输入来改变你所动画的属性的值 – 鼠标点击，一些计算的结果等。

对于这种交互，CSS中完全预定义的属性值有一定的限制。您可以在这种情况下决定依靠JavaScript，但是单独使用JavaScript可能会太过分。您想要的是一种混合方法，其中您的动画或转换主要在CSS中声明，但某些方面使用JavaScript进行操作。

当将JavaScript与动画或转换相结合时，并不存在竞争 – 您几乎总是希望使用转换。使用JavaScript的动画是可能的…以与在 肉桂挑战中获胜的方式大致相同 。这不是不可能使它工作，但有可能是，你不想这样做。这种差异的原因与过渡和动画如何工作有关。

动画在他们所做的工作中非常具体。该 @keyframes规则明确规定了，因为它正在运行的动画将采取的路径。尝试使用JavaScript更改动画需要一系列非常复杂的步骤，其中包括实际修改@keyframes 风格规则本身。如果你曾经操纵过一个风格规则中的CSS，你就会知道这是非常直观的。

对比动画的预定义路径是转换。转换的定义并不明确。当一个属性正在监听更改时，您的转换将会启动。此属性更改可以完全通过CSS设置：

此更改也可以通过JavaScript来实现，您可以通过设置内联样式来修改转换正在侦听的CSS属性：

转换不关心它正在监听更改的属性。只要物业变化不定，转型就会上班。这意味着，对于不涉及预定义的起点和终点的交互式场景，您可以通过使用转换声明推迟所有与过渡相关的重型提升来做很多有趣的事情。您想要转换的属性的实际值可以使用JavaScript指定。

为了帮助可视化我刚刚写的内容，我们来看一个 简单的例子：

点击灰色框中的任意位置，使圆圈移动到点击点。继续点击查看圈子继续移动。

这是如何工作的很简单。实际运动由过渡处理。知道转换到哪里是由JavaScript设置 元素上的顶和左属性值来处理的。因为转换正在监听顶部和 左侧属性的更改，任何更改都会导致您的转换踢入。最终结果正是您想要的。最重要的是，您不必编写任何JavaScript来处理实际运动本身。作为一个奖励，因为在CSS中声明了转换，您的浏览器会大大优化它，使其运行正常。

转换和JavaScript之间的这种友谊是如此充满胜利，它伤害了写作。

结论

你有它 – 坦率地看看什么使过渡和动画相似但非常不同。确定何时使用的一般方法如下所示：

• 如果我想要的是通过拥有多个关键帧和轻松循环来提供灵活性，那么我将会使用动画。
• 如果我正在寻找一个简单的从动画到动画，我转过身去。
• 如果我想操纵我想使用JavaScript进行动画化的属性值，我会转换。

现在，通过足够的努力和JavaScript tomfoolery，您可以消除我列出的任何缺陷，以决定是否使用转换或动画。我的建议是基于常见的情况，您主要以面值进行转换或动画。改变默认行为的艰巨努力是令人钦佩的，但往往是不必要的。