稻草日志分享:css3动画常用属性animation-timing-function中steps(详解

王亚兵6个月前 (10-18)HTML5CSS386

在前面的文章中我们已经详细的了解了animation动画属性,其中有几个重点需要注意一下,尤其是在我们实际的web前端开发中。注意这些细节和属性特点,会让我们制作的动画更加的细腻有趣。其中animation-timing-function中的step()的使用。今天我们就带大家重新认识一下这个属性以及step()的作用。

在此之前,首先要解决昨天一个问题,我们发现在昨天的连写中,没有animation-play-state属性。为什么呢?很容易理解,我们动画肯定是要动的。一般情况下我们默认动画懂事运动的。没有人会去使用paused暂定动画的。除非是想要利用一些鼠标经过暂停的效果。所以说这个属性一般是和我们的伪类选择器配合使用。

接着我们在说一下animation-timing-function这个属性,其实作为一个动画来说,如何做的连贯自然是非常重要的一件事情。了解过MG动画的小伙伴可能都听说过动画的12原则。比如动作的惯性,动画预备动作,还有我们所说的慢入慢出。我们的曲线就是来控制动画的一个慢入慢出。这个可以让我们的一个动画变得更加的真实。下面这些现成的曲线效果就是为了让我们的动画变得真实的。

css3动画animation-timing-function中steps函数

除此之外,还可以利用我们animation-timing-function属性实现flash中的逐帧动画的效果,这个就需要利用我们今天介绍的属性值steps()。有点英语基础的可嫩对这个单词并不陌生。它就是指的我们动画的步数。我的理解更想是帧数。也就是完成这个动画需要几针也就是几步。

css3动画animation-timing-function中steps函数

如上图,我们的div从开头走向结尾。可以看出他是一帧一帧的走。但是很多人会问,卫视麽你的steps中写的是5,看起来却只走了四步。这是什么原因呢?其实steps函数可以写两个值一个是数字。也就是把我们的动画分几步。第二属性值可以写两个单词一个是start还有一个end也就是开始和结束。如果我们不设置这两个值默认的是end。也就是在视觉上会跳过最后一步也就是100%的状态。而start则是从第一侦动画是从第一步的结束开始的。对比如下:

css3动画animation-timing-function中steps函数

可能有人会觉得学这个steps很麻烦。但是在web前端开发中,可以利用这个steps制作出很多有趣的逐帧动画,具体怎么做大家可以自己先想一下。后面的文章会给大家揭晓。

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。