如何使用CSS动画延迟

作为营销人员，重要的是要想出不仅是信息，而且是吸引人的内容。

一些营销人员通过在文章中添加动画来达到这一目的——看看BuzzFeed的任何一篇充满动图的文章就知道了。

动画是吸引用户并将注意力吸引到网站内容上的一种有趣的方式。但是，除了使用GIF表情包，你还可以用动画做更多的事情。

在早期，人们使用Flash制作简单的动画。然而，使用Flash(用于网页内容)会让你的网站变慢。

由于速度是SEO和用户体验的重要因素，Flash并不适合现代营销人员试图在相关搜索中排名。

动画,不放慢你的网站也可以用代码创建。创建动画的一种方法是使用Javascript，这是最困难的编程语言之一。

好消息吗?raybetapp

创建动画,您可以使用CSS(层叠样式表)，它是一种轻量级的编码语言，与HTML完美匹配。

什么是CSS动画?

简而言之，CSS描述HTML元素如何出现在网页上。它们可以是静态的(不移动的)或动态的。

CSS动画是通过创建一系列逐渐从一种风格转变为另一种风格的元素来执行的。将元素设置为transition的次数没有限制，但是必须定义要更改哪些CSS属性。

你可以修改的一些动画属性包括颜色、背景和动作。这些可能看起来不多，但当你把所有东西放在一起时，可能性是无穷无尽的。

要创建一个CSS动画，你必须首先理解关键帧和动画属性。

当你学习更多关于CSS动画的知识时，你还需要熟悉其他一些额外的动画属性，但是本文的其余部分将集中讨论如何使用CSS动画延迟。

的animation-delay属性设置动画开始前的时间间隔。用秒和毫秒表示。

此属性有三个预定义值:时间,最初的,继承。

首先,<时间>设置动画开始前的特定秒数或毫秒数。当值为正时，例如2s或500ms，动画在该时间之后开始。

当值为负时，动画开始就好像它已经播放了指定的时间。例如，当值为animation-delay: 2 s，动画立即开始，但进入序列两秒钟。

很酷,对吧?

第二,<初始>将属性返回到元素的默认值。

第三,<继承>将属性转换为父元素的子元素。

对于任何动画，你都需要定义动画和animation-name。如你所料，动画定义动画将运行多长时间animation-name为特定的动画创建一个单独的参考点。

下面是一些简单的CSS动画延迟代码示例:

div {

animation-delay: 300毫秒;

}

div {

animation-delay: -300毫秒;

}

你也可以自己测试CSS动画延迟CSS代码CodePen示例或简单地查看下面不同的动画延迟选项。

1 s动画延迟

1 s动画延迟

没有动画延迟

当你想要设置动画在迭代或渐入之间的延迟时，动画延迟是特别有用的。

虽然没有特定的属性“CSS动画延迟之间的迭代”或“CSS动画淡入延迟”，你当然可以通过结合animation-delay和其他动画属性来实现这些效果，例如:

animation-timing-function:定义动画的速度。此属性的预定义值包括:ease、ease-in、ease-out、ease-in-out、linear、initial和inherit。
animation-iteration-count:设置动画播放的次数。取值为:#、infinite、initial和inherit。当动画在再次开始播放之前延迟一段时间时，你可以设置CSS动画迭代之间的延迟。当你想要动画多次运行，但又想在每次迭代之间创建一个暂停时，这是很有用的。你可以通过使用一个特定的变量多次声明动画来实现这一点animation-delay为每一个。
动画方向:定义触发时动画的方向。取值为normal、reverse、alternate和alternate-reverse。
animation-fill-mode:设置在动画持续时间之前或之后应用的动画样式。取值包括:“向后”、“向前”、“两者”和“正常”。
animation-play-state:定义动画的状态(即播放或暂停)。