animation-fill-mode

  • 版本:CSS3
  • 继承性:无

animation-fill-mode的具体语法

animation-fill-mode:none | forwards | backwards | both [ , none | forwards | backwards | both ]*

默认值none

适用于:所有元素,包含伪对象:after和:before

继承性:无

animation-fill-mode的取值介绍

none:
默认值。不设置对象动画之外的状态
forwards:
设置对象状态为动画结束时的状态
backwards:
设置对象状态为动画开始时的状态
both:
设置对象状态为动画结束或开始的状态

animation-fill-mode的使用说明

检索或设置对象动画时间之外的状态
  • 如果提供多个属性值,以逗号进行分隔。
  • 对应的脚本特性为animationFillMode

animation-fill-mode的浏览器兼容性

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 IE Firefox Safari Chrome Opera
版本 6-9 4 5.1.7 13-23 11.5-11.6
版本 10 5-18

animation-fill-mode的完整演示案例

纯CSS方式实现CSS动画的暂停与播放!

使用纯CSS的方法,能否暂停、播放CSS动画?看起来不可能,至少很麻烦。本文介绍代码来实现了纯CSS方式实现CSS动画的暂停与播放。作者:伯乐专栏/coco来源...4月27日

10 个优质的 CSS 与 JS LOGO 动画示例

优质的CSS与JSLOGO动画示例利用HTML和CSS制作LOGO动画要比以前更容易,通过使用最新的JavaScript库也能够使网页动画制作的更加精良。在本文中...4月3日

15个无比华丽的HTML5/CSS3动画应用

未来的Web将会是由HTML5主导,当然作为开发者对这一喜讯更为动心。本文主要分享了15个无比华丽的HTML5/CSS3动画应用,供大家参考学习。1...6月6日

高级程序员170行纯css代码制作Apple手机开机动画

本期Apple手机开机动画是用纯css代码制作,代码量170行,下面我们一起来看下本期的效果源码。需要更多的web前端企业级特效,学习方法可以加一下我的前端.....6月9日

纯CSS3做炫酷环形星星发光动画,在简单没思路你也做不出来

这个特效是用CSS3制作的,虽然录制的图片出来看起来很卡,但是实际上还是很顺畅的。想要更多的企业求职加分项目,案例,学习方法可以来一下我的前端群611256580...5月23日

精选!CSS 动画之工具、框架和教程

CSS·动画分享到:CSS动画之工具、框架和教程在这篇文章中,我们将不讨论使用CSS动画的好处,也不会谈论,而是与你分享一些CSS工具,框架和教程...1月22日

sinPlanet.aep.2.css动画部分

网页上使用的css动画,因为直接储存在html以及css文件中,能减少部分流量,并且适当修改还能随意调整尺寸; 使用关键帧制作动画请查看:http://weibo...2016年12月18日

[译]10个惊人的CSS和JavaScript动画logos例子

个HTML和CSS的动画logo比以前容易多了,配合更新的JavaScript库可以进一步推动网络动画的发展。看看这个画廊的10个令人难以置信的自定义动画logo...3月9日

CSS3-Animatian抽丝剥茧 一步步撸出跑男动画

之前的一些文章大多都是分享JS相关内容。今天轻松一下,我来谈谈前端页面的动画部分。通过剖析一个“跑男”动画实例,来把CSS3中动画相关的知识点抽丝剥茧...3月14日

详解用CSS3制作圆形滚动进度条动画效果

家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客《CSS实现进度条和订单进度条》,但是呢...2月9日

关于CSS3的变形、过渡、动画、关联属性

CSS·关联,动画,变形,过渡分享到:一、变形transform:可以对元素对象进行旋转rotate、缩放scale、移动translate、倾斜skew...3月9日

CSS3黑色主题菜单 菜单项淡入淡出动画

一款简单实用的CSS3菜单,菜单是黑色主题,因此显得非常端庄霸气。由于菜单应用了CSS3特性,菜单的边缘将出现阴影的效果,给人立体的视觉效果。另外还有一个特点就是...3月6日

【117期】多屏复杂动画CSS技巧三则

如果是多屏复杂动画就是更大的挑战,那么今天就带来这篇作者的经验之谈,相信能给很多人带来帮助和启发。下面正文:当下CSS3应用已经相当广泛...1月8日

CSS3动画实践 – 2017京东集团开年大会项目有趣的动画实现

但是大家在年会等待开奖期间还是有不少好玩的东西可以消遣的。下面就为大家介绍两个基于CSS3做的动画效果:一个是在朋友圈广为扩散、略显逼格的「京彩AR」...2月21日

我之前做了一些css3动画的效果,对css3流畅而又实现简单的动画效果深深着迷,遂决定探究下css3动画的来世今生,本文如有疏漏,请各位看官及时指出...2月12日

jQuery-Ajax(动画,请求json文件,淘宝购物车html,css与jq功能制作)

jQuery还是比较好操作的,把Ajax说完,再加一点点动画,差不多全部基础的东西都完毕了。今天圣诞节,没有期待就没有伤害,不矫情了,还是学习充实一下吧~简单的介...2016年12月25日

HTML5/CSS3奔跑动画 动画效果非常逼真

用HTML5/CSS3技术结合多张图片的切换来实现的。这款HTML5动画的逼真之处在于人物在奔跑的时候很有节奏感,而且有人物的投影。更重要的是当人物跑的越来越近是...3月7日

两张图解释CSS动画的性能

在手机上使用CSS动画时很多时候会感到卡顿,然后网上很多教程说开启GPU加速transform:translate3d(0,0,0);可解决...2016年10月10日

css3实现音乐动画播放的例子

111cn.net更新:2016-09-24编辑:kupeer来源:转载音乐动画在css3中可以直接实现了不需要使用js了...2016年9月24日

CSS3参考手册,全网最新最全的CSS3参考手册,为你呈现最好的CSS3文档CSS3参考手册