<!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)的更多相关文章

  1. animation几个比较好玩的属性(alternate,及animation-fill-mode)

    <!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; backg ...

  2. Android动画主要包含补间动画（Tween）View Animation、帧动画（Frame）Drawable Animation、以及属性动画Property Animation

    程序运行效果图: Android动画主要包含补间动画(Tween)View Animation.帧动画(Frame)Drawable Animation.以及属性动画Property Animatio ...

  3. CSS3动画属性：动画(animation)

    一:动画(animation)的参数详解 由于上面用到了animation动画,这里详细介绍下这个animation的参数. 简介 CSS动画(Animations)简单说就是在一段固定的动画时间内暗 ...

  4. Android 动画——属性动画Property Animation

    Android在3.0之前只提供了两种动画:View Animation .Drawable Animation .也就是我们在<Android 动画——Frame Animation与Twee ...

  5. IT兄弟连 HTML5教程 CSS3属性特效 动画-animation

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation.前面已经介绍过Transform和Transition了,这里我们来学习Animation动画.通 ...

  6. 使用属性动画 — Property Animation

    属性动画,就是通过控制对象中的属性值产生的动画.属性动画是目前最高级的2D动画系统. 在API Level 11中添加.Property Animation号称能控制一切对象的动画,包括可见的和不可见 ...

  7. css3 transition属性变化与animation动画的相似性以及不同点

    下面列子中的2个图片的效果. http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html 第一个为transiti ...

  8. CSS3与动画有关的属性transition、animation、transform对比

    最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了. 索性在这里进行一个简单的对比,加深自己的记忆. 浏览器兼容性 CSS3 transform 属性 Internet ...

  9. 使用属性动画 — Property Animation

    属性动画,就是通过控制对象中的属性值产生的动画.属性动画是目前最高级的2D动画系统. 在API Level 11中添加.Property Animation号称能控制一切对象的动画,包括可见的和不可见 ...

随机推荐

  1. 上传的文件放在SVN服务器的哪个目录下

    SVN服务器版本库有两种格式,一种为FSFS,一种为BDB 把文件上传到SVN版本库后,上传的文件不再以文件原来的格式存储,而是被svn以它自定义的格式压缩成版本库数据,存放在版本库中. 如果是FSF ...

  2. 上传app store 应用指南链接--2

    http://www.docin.com/p-166876874.html http://jamesli.cn/blog/?p=955 http://www.adobe.com/devnet/flas ...

  3. Web 前端攻防（2014版）-baidu ux前端研发部

    http://fex.baidu.com/articles/page2/ Web 前端攻防(2014版) zjcqoo | 20 Jun 2014 禁止一切外链资源 外链会产生站外请求,因此可以被利用 ...

  4. 深入理解 Linux 内存管理

    1. 内存地址 以Intel的中央处理器为例,Linux 32位的系统中.物理内存的基本单位是字节(Byte),1个字节有8个二进制位. 每一个内存地址指向一个字节,内存地址加1后得到下一个字节的地址 ...

  5. java数组转json

    public String toJsonObject(String[] list) { String json="["; for (int i=0;i<list.length ...

  6. spring的applicationContext.xml中的DBCP配置如下：

    <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy ...

  7. 【协议篇】UDP

    UDP(User Data Protocol,用户数据报协议)是与TCP相对应的协议.它是面向非连接的协议,它不与对方建立连接,而是直接就把数据包发送过去! UDP适用于一次只传送少量数据.对可靠性要 ...

  8. 转:基于 linux 平台的 libpcap 源代码分析

    libpcap 是 unix/linux 平台下的网络数据包捕获函数包,大多数网络监控软件都以它为基础.Libpcap 可以在绝大多数类 unix 平台下工作,本文分析了 libpcap 在 linu ...

  9. 【转载】@RequestMapping的分类

    @RequestMapping的分类 类级别的和方法级别的@RequestMapping的几种形式: @RequestMapping(method = RequestMethod.GET)  @Req ...

  10. MyEclipse 8.6插件下载

    (源自网络:http://hi.baidu.com/%D4%B5%BA%A3%C7%E9%C9%EE/blog/item/ad86323d1e80a5e33d6d97c6.html  和 http:/ ...