当前位置:
新疆25选7开奖号码 > 网站开发 > HTML >
-
css教程之animation-fill-mode [播放后的状态]
- 2017-05-26 18:04 来源：未知
语法
animation-fill-mode: none | forwards | backwards | both; 检索或设置对象动画时间之外的状态。
| 语法项目 | 说明 |
|---|---|
| 初始值 | none |
| 适用于 | 所有元素 |
| 可否继承 | 否 |
| 媒介 | 视觉 |
| 版本 | CSS3.0 |
说明
新疆25选7开奖号码 www.d1dx0.cn 检索或设置对象动画时间之外的状态。
如果提供多个属性值，以逗号进行分隔。
取值
none：默认值。不设置对象动画之外的状态
forwards：结束后保持动画结束时的状态，但当animation-direction为0，则动画不执行，持续保持动画开始时的状态
backwards：结束后返回动画开始时的状态
both：结束后可遵循forwards和backwards两个规则。
实例代码
CSS
- .demo_box{
- -webkit-animation:f1 2s 0.5s 1 linear;
- -moz-animation:f1 2s 0.5s 1 linear;
- position:relative;
- left:10px;
- width:100px;
- height:100px;
- margin:10px 0;
- overflow:hidden;
- }
- .forwards{
- -webkit-animation-fill-mode:forwards;
- -moz-animation-fill-mode:forwards;
- }
- .backwards{
- -webkit-animation-fill-mode:backwards;
- -moz-animation-fill-mode:backwards;
- }
- @-webkit-keyframes f1{
- 0%{left:10px;}
- 100%{left:500px;}
- }
- @-moz-keyframes f1{
- 0%{left:10px;}
- 100%{left:500px;}
- }
复制
HTML
运行一下 »- <div class="demo_box forwards">我留在终点</div>
- <div class="demo_box backwards">我只回到原点</div>
复制
兼容性
| IE | Firefox | Opera | Safari | Chrome |
|---|---|---|---|---|
| IE 10+ | Firefox 3.5+ | 目前暂无版本支持 | Safari 10+ | Chrome 2.0+ |
最新更新
C#教程之C#操作Mongodb
C#教程之C#学习记录
C#教程之.Net语言 APP开发平台——Smobiler学
C#教程之C#汉字转拼音（支持多音字）
C#教程之QRCode
C#教程之DataTable数据批量写入数据库三种
C#教程之委托 lambda表达式浅显理解
c#教程之学习C#线程
c#教程之C#委托的一次＂甜蜜＂接触
c#教程之C#多线程之基础篇3
asp.net教程之纯ASP上传图像文件到数据库实
asp.net教程之ASP错误处理
asp.net教程之ASP网站防范黑客技巧
asp.net教程之用ASP取出HTML里面的图片地址
asp.net教程之ASP实现网页打开任何类型文件
asp.net教程之ASP木马Webshell安全解决办案
asp.net教程之几招让你的网站免受采集之苦
asp.net教程之ASP使用MYSQL数据库全攻略
asp.net教程之Ad Rotator 组件参考
asp.net教程之在Asp中使用存储过程数值类型
sql语句大全之SQL递归查询知多少
sql语句大全之SQL Server 2012 - 多表连接查询
sql语句大全之SQL Server 2012 - 开窗函数
sql语句大全之“RESOURCE MONITOR“CPU占用特别
sql语句大全之关系型数据库基本概念及
sql语句大全之T-SQL语句
sql语句大全之记一个常见的ms sql server中取
sql语句大全之游标 的使用
sql语句大全之sp_executesql 或者 EXECUTE 执行
sql语句大全之SQL Server 用角色(Role)管理数
