稻草日志分享:css3动画中的其他属性,以及animation属性的简写

王亚兵6个月前 (10-17)HTML5CSS387

上篇文章和大家一起详细的聊了一下css3动画在web前端开发中常用的一些常用的属性,其实动画属性有很多,所以今天和大家聊一下其他的两个animation动画属性,以及动画animation的简写。

首先我们先回顾一下上篇文章中讲了那些属性,其中包括了animation-name,调用动画的名称,animation-duration动画的持续时间,animation-timing-function动画的运动曲线、还有animation-delay 动画的一个开始时间延迟。前面的这四个在过渡transition中也是存在的。还有一个animation-iteration-count动画的循环次数。animation-direction动画的一个方向。也就是可以逆向的显示动画效果。今天给大家介绍的动画属性,能让我们做出更加细腻的效果。

首先是今天介绍的第一个属性:animation-play-state,这个是控制我们的动画是否运行,共有两个属性值一个是running一个是paused暂停,我们通常默认情况i下都是running,也就是运行状态。在前端开发中,我们通常会结合伪类选择器实现一种当鼠标点击或者是经过暂停的效果如图:

css3动画属性简写

另外一个动画属性其实也是比较常用的,animation-fill-mode他可以控制我们东湖啊结束时候的状态,是停在原位,还hi返回到开始。他一般也是有两个值一个是forwards也就是让它呆在停止的地方,还有一个是backwards回到原点。这个也是默认的一个属性,所以我们看下forwards的效果就可以了.

css3动画属性简写

其实我们之前也说过animation的简写,不过当时没有讲这些属性。这里我简单的说下:一般情况下css3中animation的简写是这么一个顺序:animation: name duration timing-function delay iteration-count direction fill-mode;。不一定全部都有,在web开发中要根据情况进行书写。

发表评论

访客

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