稻草日志分享:css3中的常用动画属性详解

王亚兵6个月前 (10-15)HTML5CSS385

通过前面几篇文章的分享,我想大家对于我们css3中的动画的定义以及调用都已经很了解了。而且知道了我们css3中过渡和动画中之间的区别,也同样的知道了通过animation动画可以制作出很多web页面的动效。让我们的网站更加的生动,富有趣味性。我们了解了动画的定义和调用,今天详细的说下web前端开发中比较常用的额动画属性

首先是我们的animation-name这个,我们用@Keyframes定义好了动画,就是需要animation对动画进行调用的。他只需要他进行调用的。按理说我哦们调用之后应该会出现我们的一个动画效果,由白到黑。但是我们发现并没有什么变化。  

css3中常见动画属性

这是为什么呢?原因是我们虽然已经调用了,但是我们没有给它设置时长。也就是说他的持续时间默认是0.所以我们看不到他的变化。这个时候就需要animation-duration。就是设置动画的持续时间,这里设置成3秒。大家看下效果:

css3中常见动画属性

除此之外,动画必须要自然,所以他肯定是需要一个曲线的,这个和我们transition比较像。他需要一个由快到慢或者由慢到快的一个过程,所以说我们的animation同样有这么一个属性就是:animation-timing-function属性,他控制的是我们变化曲线,可以是ease就是先慢后快,再慢。当然也有其他的一个属性,如下表:大家了解一下。

css3中常见动画属性

我们在介绍transition是有一个延迟动画开始时间,作为animation肯定也是有的,就是animation-detay。可以设置我们动画效果延时开始。

css3中常见动画属性

和过渡不同的是,多了我们的一个循环,就是animation-iteration-count,这个就是他的播放次数,可以是具体的数字,默认是1,也可以是infinite,无限循环。还有我们的另一个属性就是animation-direction。动画的方向,可以是normal默认的,也可以是alternate反向,就是从蓝色变成黄色在变成蓝色。

css3中常见动画属性

综上,是我们常用的六个css3动画属性,在我们的开发web前端开发过程中,经常会遇到希望大家通过本次稻草日志的分享:大家能够掌握这六个常用的动画属性,剩下的我们将会在下次分享中详细的给大家介绍。

发表评论

访客

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