稻草日志分享:css3动画效果属性有哪些

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

经过前面对于transform的分享,可能很多人都有这样的疑问,这么多变换效果有什么用,除了通过过渡实现一些交互动画之外还有其他的作用吗?当然是有的,在web前端开发中,css3动画效果应用还是非常广泛地。比如加载动画,还有一些提高页面趣味性的一写动画效果,那么css3动画效果属性有哪些


css3动画属性

可以说前面提到的变换效果就是我们的一个动画属性。比如我们的移动translate,缩放scale,旋转rotate。在我们实际的使用中,大多数情况下不会单独的添加这些属性,要么利用动画制作一些炫酷有趣的效果。要么利用transistion。进行简单的一个过渡效果。比如我们经常浏览网页的人应该知道,有时候当我们鼠标进过某个页面元素的时候,他会有一个放大的效果。这就是通过transition加我们的transform制作出来的。

所以说前面我们学到的transform的相关属性,以及transition都是属于动画效果属性的,这个时候我们就应该知道了,我们学习这些东西有什么用了吧,我们都知道transform毕竟只是一个过渡效果。一般适合伪类选择器进行配合的。而我们所说的动画效果属性是指animation属性,下面给大家看一下我们的animation属性都有哪些?

css3动画属性

和我们很多的属性一样,它也是可以进行连写的,一般情况下animation: name duration timing-function delay iteration-count direction。以上就是我们所需要了解的css3动画效果,在后面的分享中,稻草日志会继续和大家分享css3动画效果的定义,以及动画属性的作用以及如何使用。

发表评论

访客

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