CSS动画与转换之间的主要区别

如果您对自动反应或响应您的屏幕操作的网站遇到了很酷的效果，则可能会旨在在您自己的网站上实现它们。

有时这些效果比美学上令人愉快的更具功能。例如，考虑表单页面上的后续文本的情况可能会设置为在完成不同的步骤时显示。

这些效果使网站交互式，给游客整体令人满意的经验（所有因素考虑）。让他们在您的网站上可以帮助更合格的领导，并在未来购买的人中创建以下内容。

但首先：你如何提及这些效果？有两个分类。在设计世界中，它们被称为过渡和动画。

你可能已经注意到一些效果似乎更复杂。JavaScript可用于呈现这些效果，但今天我们将讨论使用CSS使用它们。事实上，CSS3可以说是更有效的设置它们的方法。

在将这些效果添加到您的站点之前，您需要考虑哪些效果可以满足您的要求。我们很容易混淆CSS的过渡和动画，因为它们让你做类似的事情:

• 您可以可视化属性更改。
• 您可以设置缓动功能来控制属性值变化的速率。
• 您可以设置过渡或动画的持续时间。
• 您可以指定解释更改并发起响应的属性。
• 您可以收集有关导致转换或动画的事件的数据来启动和使用它以改善您的营销活动。

尽管它们在表面上是如何相似的，但每个选择都有优缺点。您需要了解它们如何在您的网站上运行以及在您决定移动的可视格式对您的适合之前融入其中的内容。

CSS转换

如果你只是想在你的网站上做一个简单的动作，一个过渡是最简单的方法。转换连接到一个触发动作——最常见的情况是当鼠标悬停在一个元素上时。在这种情况下:徘徊pseudo类用于更改CSS属性值，从而使元素按照期望作出反应。

您可以设置一个元素来更改它颜色那规模， 或者位置。你也可以旋转那斜,翻译对象。如果您想要更复杂一点的转换，甚至可以同时影响多个属性。例如，如果您想要您的过渡改变背景颜色和宽度，您可以为两者指定条目背景颜色和宽度属性。

CSS转换和JavaScript

在CSS中预定义的属性值可能证明某些交互的限制。在这种情况下，您可能想要诉诸JavaScript。但如果您不想完全使用JavaScript，可以设置混合方法。

如果您决定使用JavaScript管理更加困难的方面，更简单的CSS转换是您的朋友。

CSS转换的例子

下面是一个CSS转换的例子。这个图形根据触发动作的鼠标悬停在两个确定的状态之间交替。过渡可能很有用，但比CSS动画更基本。

CSS的过渡和动画有很多相似之处。然而，很明显，它们也有显著的不同，这应该指导你如何在你的网站上使用它们来提高你的营销努力。过渡通常适用于简单的动作，而动画适用于更复杂的一系列动作。

了解更多关于什么是CSS动画以及如何在你的网站上使用它们。