animation几个比較好玩的属性(alternate,及animation-fill-mode)
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
animation-fill-mode: both;
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>
<p><b>凝视：</b>本例在 Internet Explorer 中无效。
</p>
<div></div>
</body>
</html> 这是摘自w3school的一段关于keyframes的代码，大家有兴趣的能够看一下，
http://www.w3school.com.cn/tiy/t.asp?f=css3_keyframes
大家能够看到一个红色正方形，从上方运动到以下。再高速回到上面，再按animation:5s;从上面运动到下方，这样周而复始.那么在这个里面起关键的是keyframes，定义了动画，而animation:infinite 5s；则定义了动画效果。当中infinite代表的是循环，周而复始的这个过程。去掉这个，我们则看到红色正方形缓缓下来之后再高速回到上面后就不再动了。
那么我们想使正方形运动一次后留在以下，应该怎样处理，这就是animation-fill-mode的作用。我今天在teambition站点上看到了他们的导航条的效果便是利用了这个，依据w3，animation-fill-mode有四个属性，none,forwards,backwards,both，当中none和forwards使得运动物体动画结束后回到动画前的状态，而both和forwards则使运动物体在动画结束后保留动画结束前最后一帧的效果。因此如 果我们希望正方形运动一次后停在下方，则须要使用animation-fill-mode这个属性。
而alternate则是达到往返效果，我们在实现摆钟动画时往往可能须要这个，我们不可能希望摆钟从左摆到右是一个我们确定的频率。从右摆到左又是一个急速的状态，没有保持一致。
这样视觉上会大打折扣，大家能够在这个红色正方形上实验一下。
譬如animation:mymove 5s infinite;变为 animation:mymove 5s infinite alternate；
来实际观察一下效果。
如有问题请及时告诉我。大家共同学习啦。
animation几个比較好玩的属性(alternate,及animation-fill-mode)的更多相关文章
- animation几个比较好玩的属性(alternate,及animation-fill-mode)
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; backg ...
- Android动画主要包含补间动画（Tween）View Animation、帧动画（Frame）Drawable Animation、以及属性动画Property Animation
程序运行效果图: Android动画主要包含补间动画(Tween)View Animation.帧动画(Frame)Drawable Animation.以及属性动画Property Animatio ...
- CSS3动画属性：动画(animation)
一:动画(animation)的参数详解 由于上面用到了animation动画,这里详细介绍下这个animation的参数. 简介 CSS动画(Animations)简单说就是在一段固定的动画时间内暗 ...
- Android 动画——属性动画Property Animation
Android在3.0之前只提供了两种动画:View Animation .Drawable Animation .也就是我们在<Android 动画——Frame Animation与Twee ...
- IT兄弟连 HTML5教程 CSS3属性特效 动画-animation
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation.前面已经介绍过Transform和Transition了,这里我们来学习Animation动画.通 ...
- 使用属性动画 — Property Animation
属性动画,就是通过控制对象中的属性值产生的动画.属性动画是目前最高级的2D动画系统. 在API Level 11中添加.Property Animation号称能控制一切对象的动画,包括可见的和不可见 ...
- css3 transition属性变化与animation动画的相似性以及不同点
下面列子中的2个图片的效果. http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html 第一个为transiti ...
- CSS3与动画有关的属性transition、animation、transform对比
最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了. 索性在这里进行一个简单的对比,加深自己的记忆. 浏览器兼容性 CSS3 transform 属性 Internet ...
- 使用属性动画 — Property Animation
属性动画,就是通过控制对象中的属性值产生的动画.属性动画是目前最高级的2D动画系统. 在API Level 11中添加.Property Animation号称能控制一切对象的动画,包括可见的和不可见 ...
随机推荐
- 转：Gerrit 学习
转载:http://www.scmeye.com/thread-1665-1-1.html 入门Gerrit简介Gerrit是一个建立在Git版本控制系统之上,基于Web的代码审查工具,但如果你已经阅 ...
- uni - 条件渲染
vue官方文档和uni官方同步:https://cn.vuejs.org/v2/guide/conditional.html 1.多次切换建议使用v-show(始终保存在BOM) 2.因为if是惰性判 ...
- nl命令（转）
原文:http://www.cnblogs.com/peida/archive/2012/11/01/2749048.html nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件内容 ...
- Java从零开始学十四(包和访问控制)
一.java中的包 Java文件的组织形式Windows中的文件功能类似 在开发比较大的项目时,不可能只涉及到一个java文件,可能要创建几十,甚至几百个java文件,这个时候,我们就可以使用包,把相 ...
- Android 四大组件学习之BroadcastReceiver三
本节学习广播的分类. 广播分为无序广播和有序广播 无序广播: 广播发送者的action与广播接收者的action都匹配的话,所以广播介绍者都能够收到这条广播,而且没有先后顺序,能够觉得是同一时候收到 ...
- UVA 357 Let Me Count The Ways(全然背包)
UVA 357 Let Me Count The Ways(全然背包) http://uva.onlinejudge.org/index.php?option=com_onlinejudge& ...
- 算法笔记_194:历届试题 翻硬币(Java)
目录 1 问题描述 2 解决方案 1 问题描述 问题描述 小明正在玩一个“翻硬币”的游戏. 桌上放着排成一排的若干硬币.我们用 * 表示正面,用 o 表示反面(是小写字母,不是零). 比如,可能情 ...
- 算法笔记_208:第六届蓝桥杯软件类决赛真题(Java语言A组)
目录 1 胡同门牌号 2 四阶幻方 3 显示二叉树 4 穿越雷区 5 切开字符串 6 铺瓷砖 前言:以下代码仅供参考,若有错误欢迎指正哦~ 1 胡同门牌号 标题:胡同门牌号 小明家住在一条胡同里. ...
- UEFI是什么？与BIOS的区别在哪里？UEFI详解！
前几天在帮同事小何笔记本电脑安装64位 Windows 7 的时候,遇到一个从来没有碰到过的问题,使用光盘安装时,提示:Windows无法安装到这个磁盘.选中的磁盘具有MBR分区表.在EFI系统上,W ...
- 关于NHibernate中存在于Session中实例的3种状态的简单分析
在使用NHibernate的时候.在Session中会有3种状态. 1. 瞬时状态 (Transient) 由 new 命令开辟内存空间的对象,也就是平时所熟悉的普通对象. 如: Student st ...