animation-fill-mode
animation-fill-mode:
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>
animation-fill-mode的更多相关文章
- WPF实现斜纹圆角进度条样式
原文:WPF实现斜纹圆角进度条样式 运行效果: 进度条样式: <!--进度条样式--> <LinearGradientBrush x:Key="ProgressBar.Pr ...
- 完整学习使用CSS动画【翻译】
注:原文有较大改动 使用keyframes, animation属性,例如timing, delay, play state, animation-count, iteration count, d ...
- CSS/CSS3语法新特性笔记
CSS层叠样式表 三大特性 层叠性:相同的样式会覆盖 继承性:属性可向下继承 优先级:范围越小权重越高 选择器 基础选择器 标签选择器 1 body { 2 color:#fff; 3 } 类选择器 ...
- 虾扯蛋:Android View动画 Animation不完全解析
本文结合一些周知的概念和源码片段,对View动画的工作原理进行挖掘和分析.以下不是对源码一丝不苟的分析过程,只是以搞清楚Animation的执行过程.如何被周期性调用为目标粗略分析下相关方法的执行细节 ...
- charing animation
FHD : full high definition,1920 x 1080,全高清 vendor/mediatek/proprietary/bootable/bootloader/lk/dev/lo ...
- ArrowLayer : A coustom layer animation
Since my other answer (animating two levels of masks) has some graphics glitches, I decided to try r ...
- Swift: 深入理解Core Animation(一)
如果想在底层做一些改变,想实现一些特别的动画,这时除了学习Core Animation之外,别无选择. 最近在看<iOS Core Animation:Advanced Techniques&g ...
- WP8.1 Study3:WP8.1中Animation应用
WP8.1上的Animation动画的API和WIN8/WIN8.1上的差不多,网上可以找到很多资料,同时可以去MSDN看官方文档. 下面是我参考一些资料,写出来的例子,希望以后有用. xaml代码如 ...
- iOS Instruments之Core Animation动画性能调优(工具复选框选项介绍)
Core Animation工具用来监测Core Animation性能.它给我们提供了周期性的FPS,并且考虑到了发生在程序之外的动画(见图12.4) Core Animation工具提供了一系列复 ...
- 为什么不能在scrollview中直接添加一个image,然后使animation.begin()??
http://stackoverflow.com/questions/17267451/animation-cant-begin-in-scrollview-in-windows-phone 以上是我 ...
随机推荐
- Scrapy计划表
第一步 Scrapy 一览:理解Scrapy是什么,他能帮到你什么 安装指南:在电脑上安装Scrapy Scrapy 教程:编写第一个Scrapy项目 示例:通过前人写好的Scrapy项目进行学习 基 ...
- C# DataTbale详细操作
1.创建DataTable对象 DataTable dt = new DataTable("Table_AX"); 2.为DataTable创建列 //方式一(我觉得这种好) dt ...
- Linux(CentOS)安装JDK(.tar.gz)并配置
本文思路转自http://blog.sina.com.cn/s/blog_81631744010137iy.html 点击(此处)折叠或打开 1.到 甲骨文(oracle)下载jdk不用多说 tar ...
- Centos6.5安装mysql 5.7
1.在官网下载安装包:https://dev.mysql.com/downloads/mysql/5.7.html#downloads mysql-5.7.10-linux-glibc2.5-x86_ ...
- rs.getMetadata
元数据(MetaData),即定义数据的数据.打个比方,就好像我们要想搜索一首歌(歌本身是数据),而我们可以通过歌名,作者,专辑等信息来搜索,那么这些歌名,作者,专辑等等就是这首歌的元数据.因此数据库 ...
- java 多线程研究:锁的概念
java多线程:锁 java的多线程中的锁是干嘛的呢?在网上找了很多博客,大都是很专业的语言,让我一时间摸不着头脑.下面分三个部分来总结多线程中的锁的概念. 一,基础概念: 多线程在运行的时候可能会遇 ...
- 计蒜客 30996 - Lpl and Energy-saving Lamps - [线段树][2018ICPC南京网络预赛G题]
题目链接:https://nanti.jisuanke.com/t/30996 During tea-drinking, princess, amongst other things, asked w ...
- CSU 1803 - 2016 - [同余]
题目链接:http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1803 给出正整数 n 和 m,统计满足以下条件的正整数对 (a,b) 的数量: 1. ...
- kerberos (https://en.wikipedia.org/wiki/Kerberos_(protocol))
Protocol[edit] Description[edit] The client authenticates itself to the Authentication Server (AS) w ...
- Django - 补充目录
Django项目部署 importlib应用 - django contenttypes - django组件 Django - Model操作 Django - 用户认证.用户组.用户权限 Djan ...