第一百三十三章 CSS 动画的进化

现在动画效果是有的,但是他并没有表现出和前面过渡效果的明显区别,因为我们只讲了仅仅是能让它动起来的核心内容。

大家应该可以看出,无论是过渡属性还是动画属性,其实都是复合属性,叫做快捷属性,总之就是把许多相关属性简写到一个属性之中。因为目前我们的目标就是初步的了解和基础的使用,所以也没有必要刻意地展开。

下面我把我们初步会用到的参数都写出来[1],然后逐一讲解一下。其中的一些参数可以省略,但是一定要注意这些参数的先后顺序:

#miao {animation: 3s 1s 2 reverse move_it;}

前面两个时间,这是动画执行的时间,和延迟执行的时间,这个顺序和我们前面写过渡的时候不一样。它们的单位都是秒,而且很明显都已经自带单位(s)了,这一点和我们写 jQuery 的时候不一样。

第 3 个数字是执行的次数,默认执行一次就停止了,次数肯定不能为负数,不过很神奇的,它可以用小数。也可以使用关键字 infinite 让动画无限循环下去。

第 4 个值是动画执行的方向:

  • normal: (默认值)就是正向执行,从 from 到 to;
  • reverse: 反向执行,从 to 到 from;
  • alternate: 交替执行,先从 from 到 to,再从 to 到 from,如此往复;
  • alternate-reverse: 反向交替执行,先从 to 到 from,再从 from 到 to,如此往复

挺好理解的,也就两个生词,但是我记不住,我知道它们可以设置方向,然后需要的时候我会去查文档。

最后一个是我们要执行的动画的名字。

关于动画还有很多其他属性,关于过渡也是。这部分我们讲的只是很基础的,能让它动起来了,我们也可以去使用了。但如果你觉得这些内容没有办法满足你现在的需求,一定记得去查看文档,进行进一步的学习。

动画把关键帧单独出来进行定义,是因为它可以一次去定义多个关键帧,并不一定只是两个,这就非常的厉害了。我们的过渡效果,只能是从一个状态到另外一个状态,而动画效果,可以从一个状态到另外一个状态,这个过程中,又经过许多我们指定的状态。

这样描述,不够直观,所以举个简单的例子:我们从黑色过渡到白色,这个过程中,颜色是不同程度的灰色,他可能是红色吗?可能是绿色吗?过渡只能直接的走向目标。但是动画就可以,我们可以让从黑色到白色的动画中,先变到红色再变到绿色,最后变成白色。让他按照我们所指定的路线,去完成这个过程。

这时候 from、to 两个命名就不够用了,还好,我们可以使用百分比:

@keyframes change_color {0% {background: black;}33% {background: red;}66% {background: green;}100% {background: white;}}

所以其实 from 和 to 这两个关键字就相当于 0% 和 100% 。然后,如果我们让动画进行循环播放,请注意关键帧的前后衔接问题。

至此,CSS 的动画效果我们就讲完了。道理上是很简单的,但如何去应用,却值得我们深入思考和反复实践。

原文链接:https://www.ek58.com/archives/3791,转载请注明出处。

0

评论0

请先

没有账号? 注册  忘记密码?