什么是 CSS 动画方向属性：你需要知道的一切

你认为 CSS 仅用于创建动画是什么？ 确实如此，但除此之外，您还可以利用 CSS 来控制速度、持续时间、方向、开始时间等。

无论您希望动画向上还是向下移动，Web 开发中的 CSS 动画方向属性都可以让您实现目标。

你是新手吗？ 不用担心！ 在本博客中，您将了解有关 CSS 动画属性的所有信息。

现在，事不宜迟，让我们了解 CSS 动画的全部内容以及它的用法。

什么是 CSS 动画方向属性？

CSS动画方向属性是关于动画的方向。 设置此属性后，您可以轻松地设置动画循环向后、向前或交替方向。

现在，让我们看看不同的动画方向：

• 动画方向：正常；
• 动画方向：反向；
• 动画方向：交替反向；
• 动画方向：交替；

为了进一步帮助您，我分享了动画方向属性语法。 希望这种语法可以帮助您像专业人士一样创建动画。

/* CSS动画属性的Single动画 */

• 动画方向：正常；
• 动画方向：反向；
• 动画方向：交替；
• 动画方向：交替反转；

/* CSS动画属性的Multiple动画 */

• 动画方向：正常，反向；
• 动画方向：交替，反向，正常；

/* CSS 动画属性的全局值 */

• 动画方向：继承；
• 动画方向：初始；
• 动画方向：还原；
• 动画方向：未设置；

现在您已经了解了不同的 CSS 动画属性，是时候了解 CSS 动画属性的值了。

CSS 动画属性值

普通的

如果使用此属性，动画将向前播放。 这意味着对于每个动画循环，动画将重置为开始状态并重新开始。

值 -"Normal" 基本上是 CSS 中动画方向属性的默认值。 因此，如果您不设置此属性，则默认情况下，它将向前播放。

撤销

反向动画是关于每个循环以相反方向完成的动画。 在这种风格中，动画步骤和计时功能是向后执行的。

例如，缓入计时功能变成缓出。

备用

交替动画在每个循环中反转方向，第一次迭代为正向。 计数是为了确定一个周期是奇数还是偶数从一开始。

交替反向

交替反转反转每个循环的方向，第一次迭代向后播放。 计数是为了确定一个周期是偶数还是奇数，从一开始。

动画方向的 CSS 简写

您会惊奇地发现，您还可以设置各种动画属性，包括动画方向，这可以通过使用动画速记 CSS 属性来完成。

CSS 动画速记属性在样式之间应用动画。 它是设置所有动画属性的简写方法，如动画名称、动画持续时间、动画定时功能、动画延迟、动画迭代计数、动画方向、动画填充模式和动画播放-状态。

常见的 CSS 动画问题

无论您的动画没有按您想要的方式运行，还是根本无法运行，以下是问题的一些原因以及解决方法：

没有@keyframes 规则

在 CSS 动画中，@keyframes 规则定义了动画的外观。 更具体地说，它定义了哪些元素样式更改以及何时更改。 如果没有此规则，您的元素将无法使用任何动画。 因此，下一次，检查您的 @keyframes 规则是否存在，以及它的名称是否与目标元素的动画名称匹配。

未设置动画持续时间

假设您已经为元素分配了关键帧规则，但如果您没有设置动画持续时间，它仍然不会播放。 默认情况下，零秒长是 CSS 动画周期。

要覆盖这个循环，你需要在你的目标元素中加入一个动画持续时间规则和一个秒值，就像在同一个块中作为动画名称一样。

动画开始得太早

有时，您可能需要在动画开始之前快速推迟，以获得更高的消费者体验。 使用动画延迟物品完成此操作。

不可动画的 CSS 属性

动画不起作用的另一个原因可能是您尝试为不可动画的 CSS 属性设置动画。

不支持 CSS 动画

CSS 动画在当今最大的移动和计算机浏览器上绘画。 但是，如果您使用的是较旧的浏览器或多年未更新的浏览器模型，您的动画将无法正常工作，毫无疑问是因为缺少浏览器支持。

如果您已更新浏览器但仍然遇到问题，请尝试在您的真实策略中进一步包含带有供应商前缀的动画策略，然后再次尝试动画。

CSS 速记写错了

CSS 速记是编写清洁 CSS 并减少文件中代码数量的绝佳方式。 动画物品是那些 CSS 房屋的简写：

• 动画时期
• 动画调用
• 动画推迟
• 动画方向
• 动画填充模式
• 动画迭代依赖
• 动画国家
• 动画定时功能

需要两个值——一个用于动画周期，一个用于动画调用——是必需的。 除此之外，值的顺序决定了将哪个价格分配给哪个动画物品。

未对齐的值应该会导致动画的行为与您的预期不同。 所以，如果动画速记的使用属于，那么确保它的值在正确的顺序内被索引。

性能缓慢

CSS 动画的整体性能往往比不同类型的互联网动画更高。 然而，现在不再所有的 CSS 动画都是平等的，一些活泼的模式会逐渐降低整体性能。

大多数简单的 CSS 动画对网页加载时间没有任何重大影响。 但是，您在动画中上传的结果越多，您遇到整体性能问题的可能性就越大。

为避免整体性能不佳，Google 建议您限制使用会导致重绘的动画。 绘画是浏览器在屏幕上使用像素创建互联网网页像素的可见显示。 绘画使用大量的处理能力，因此您必须尽可能多地限制各种重绘，因为动画。

不幸的是，最大的可动画 CSS 房屋在更改时会导致重绘。 这种变换（例如缩放、旋转和位置）和不透明度的例外情况，它们可能是活泼的，对整体性能的影响最小。 这是 CSS 房屋在活跃时导致重绘的参考。

不过，不要让这阻止你完全放弃动画。 如果您遇到节奏问题，这可能是由于您正在寻求立即执行许多操作或使用动画来处理至少一个大量细节或元素组织。

在网站上，CSS 动画是一流的，但它们被巧妙地用来美化体验，所以请记住您是否想要复杂的动画与访问者互动。

最后说

是的，HubSpot 允许您通过使用正确的 CSS 代码来控制动画的方向。 出色地！ 我完全同意 CSS 动画方向属性是很多人不知道的一件事。

但是，是的，在阅读了这篇博客之后，您肯定会熟悉控制动画并为您的网站设计提供吸引人且用户友好的外观的方式。 那你还在等什么？ 准备好构建吸引目标受众的设计。

在设计网站时仍需要任何帮助，请随时与我们联系。 我们的专家也会帮助您。

编辑：迪维亚