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号称能控制一切对象的动画,包括可见的和不可见 ...
随机推荐
- ubuntu 软件包管理工具 dpkg,apt-get,aptitude 区别
ubuntu 软件包管理工具 dpkg,apt-get,aptitude 区别 一:dpkg dpkg 是一种比较低层的软件包安装管理工具,在安装时,不会安装软件包的依赖关系:只能安装所要求的软件包: ...
- JDBC五数据源和数据池(web基础学习笔记十一)
一.为什么使用数据源和连接池 现在开发的应用程序,基本上都是基于数据的,而且是需要频繁的连接数据库的.如果每次操作都连接数据库,然后关闭,这样做性能一定会受限.所以,我们一定要想办法复用数据库的连接. ...
- MHDD修复硬盘坏道
2种修复的方法,本人已经尝试过,非常管用! 1.先按SHIFT+F3扫描硬盘连接并选择,按F4键,先用一般模式扫一遍,再用高级模式扫一变,具体方法是选择LBA模式,remap项OFF,Loop the ...
- 算法导论(CLRS)答案
算法导论(CLRS)答案 Chapter Section I 1 2 p II 1 2 3 p III 1 2 p IV 1 2 3 4 p V 1 2 3 4 p VI 1 2 3 4 5 p VI ...
- poj 2226 二分图 最小点覆盖 , 最大流
题目就是问怎样用最小的板覆盖全部的草地.能够横着放.也能够竖着放,同意一个草地放多个点. 建图方法就是 每一个横向的草地作为X,纵向连续的草地作为Y. X连接Y的边表示, 这里有他们的公共点 ...
- 安装mysql 和 apache
一. 安装apache服务器 1. 检查apache服务器是否安装 #service httpd status 2. 如提示未被识别的服务,则表明组件未安装,需手动安装 #yum install ht ...
- HighCharts/Highstock使用小结,使用汉化及中文帮助文档
此文档是本人在开发过程图形报表时使用HighCharts所遇到的问题及解决方案 .最后附上有HighCharts中文帮助文档 HighCharts 版本:Highcharts-3.0.1 Hi ...
- 訪问可能没有定义的data (通过static类型flash.net:FileReference引用)
今天使用Flex实现了图片预览及其上传的功能,在整个开发过程中遇到了"訪问可能没有定义的data (通过static类型flash.net:FileReference引用)"错误, ...
- StringBuilder.AppendFormat(String, Object, Object) 方法
将通过处理复合格式字符串(包含零个或零个以上格式项)返回的字符串追加到此实例. 每个格式项都替换为这两个参数中任意一个参数的字符串表示形式. 说明: public StringBuilder Appe ...
- maven仓库介绍 牛人博客
http://juvenshun.iteye.com/blog/359256 查找jar包方法 http://juvenshun.iteye.com/blog/269094