首页 > 新闻 > CSS 动画方向属性,说明

CSS 动画方向属性,说明

2023-01-04 小编

CSS不仅可以创建动画,还可以控制其持续时间,速度,开始时间,方向等。

营销人员学习如何使用 CSS 动画方向属性

使用 CSS 动画方向属性可以轻松控制动画的行为方式。例如,假设您希望动画从左到右、从右到左或前后移动。

下面让我们演练一下如何定义此属性以控制动画的方向。

立即下载: 25 个免费的 HTML 和 CSS 黑客

CSS 动画方向值

CSS动画方向的速记

CSS 动画方向无限

指导您的 CSS 动画

什么是CSS动画方向?

CSS 动画方向属性的语法为:

 


animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;

 

为了确保动画正常工作并按所需方向移动,还必须定义动画名称和持续时间属性。

CSS 动画方向值

CSS 动画方向属性有多个可能的值。最常见的是正常、反向、交替和交替反向。该属性还接受全局值 initial 和继承。让我们在下面定义每个。

正常

如果使用正常值,动画将向前播放。这意味着,对于每个动画周期,动画将重置为开始状态。

Normal 是 CSS 中动画方向属性的默认值。因此,如果未设置此属性,则默认情况下它将向前播放。

在上面的示例中,动画从 0 开始,向右移动 100px,然后在 0 处重置并重复。

反向

如果使用反向值,动画将向后播放。这意味着,对于每个动画周期,动画将重置为结束状态。

使用此值,不仅动画步骤向后执行,计时功能也会反转。例如,缓入定时功能变为缓入。

在上面的示例中,动画从向右 100px 开始,向左移动直到达到 0,然后以 100px 重置并重复。

互生

如果希望动画在每个周期反转方向,可以使用备用值。使用此值,动画将首先向前播放,然后向后播放。

在上面的示例中,动画从 0px 开始,向右移动 100px,向后移动 0,然后向右移动。没有重置,因此循环连续两个周期。

交替-反向

如果使用交替反转值,则动画也将在每个循环中反转方向。它将首先向后播放,然后向前播放。

在上面的示例中,动画从向右 100px 开始,向左移动 100px,向后移动到 100,然后向左移动。没有重置,因此循环连续两个周期。

初始值将动画方向属性的值设置为其默认值:normal。

继承

如果指定了继承值,则动画方向属性将继承其父元素的值。

CSS动画方向的简写

使用动画速记 CSS 属性,还可以一次设置所有动画属性,包括动画方向。这将要求你编写更少的代码,并使你的代码库整体看起来更干净。例如,动画名称、持续时间、迭代计数、计时和方向在下面的同一行代码中定义:

 


animation: MyDiv 10s 5 ease alternate;

 

下面是使用上述速记的示例。

CSS 动画方向无限

使用动画方向和动画迭代计数属性,可以将动画设置为在特定数量的动画周期内向前、向后或交替移动。

下面的示例演示了设置为无限重复时的每个 CSS 动画方向值。它还使用动画速记属性。

指导您的 CSS 动画

使用 CSS,您可以控制动画的方向。这就像使用动画速记属性时添加另一行 CSS 或另一个值一样简单。您可以广泛控制动画,因此您可以决定最适合您的网站设计。


*必填

您好,访客!有什么新鲜事想告诉大家?

点击按钮快速添加回复内容: 高兴 支持 激动 给力 加油 生气 路过 威武
发表
暂时还没评论,等你发挥!