资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

如何使用animation-fill-mode属性

这篇文章将为大家详细讲解有关如何使用animation-fill-mode属性,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

网站建设哪家好,找创新互联!专注于网页设计、网站建设、微信开发、微信小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了姜堰免费建站欢迎大家使用!

animation-fill-mode属性是用于当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式,即其动画效果是否可见。

CSS3  animation-fill-mode属性

作用:animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是否可见。

说明:默认情况下,CSS 动画在第一个关键帧播放完之前不会影响元素,在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。

语法:

animation-fill-mode : none | forwards | backwards | both;

none:不改变默认行为。

forwards: 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。

backwards:在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。

both:向前和向后填充模式都被应用。

注:Internet Explorer 9 以及更早的版本不支持 animation-fill-mode 属性。

CSS3  animation-fill-mode属性的使用示例




 
 




效果图:

如何使用animation-fill-mode属性

关于如何使用animation-fill-mode属性就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


分享题目:如何使用animation-fill-mode属性
URL网址:http://www.cdkjz.cn/article/jpodde.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220