<!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. Appium Python 六：管理应用和Activity

    管理应用 1. 将当前应用放到后台 执行之后,应用会被放到后台特定时间.比如这里就是5秒,5秒过后,应用会重新回到前台. driver.background_app(5) 官网示例: driver.b ...

  2. git多仓库管理

    使用git建立多仓库管理 以下操作为命令行下操作 一:先创建服务器端口,总仓库和子仓库: ssh git@192.168.1.110        连接git服务器 输入密码 mkdir iOSPro ...

  3. The Web Sessions List

    The Web Sessions list contains the list of HTTP Requests that are sent by your computer. You can res ...

  4. PHP 在Win下的安装

    1:安装集成环境,Wamp或者Appserv.可以快速搭建测试环境. 2:分别下载安装 下载 PHP 从此处下载免费的 PHP:http://www.php.net/downloads.php 下载 ...

  5. python之函数用法file()

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法file() #file() #说明:file()内建函数它的功能等于open(),但 ...

  6. 解决Android 4.0以上版本中OptionsMenu菜单不显示ICON图标的问题

    在Android4.0系统中,创建菜单Menu,通过setIcon方法给菜单添加图标是无效的,图标没有显出来,2.3系统中是可以显示出来的.这个问题的根本原因在于4.0系统中,涉及到菜单的源码类 Me ...

  7. Job for vsftpd.service failed because the control process exited with error code

    # systemctl start vsftpd.serviceJob for vsftpd.service failed because the control process exited wit ...

  8. HTTP 协议中的 Transfer-Encoding

    HTTP 协议中的 Transfer-Encoding 文章目录 Persistent Connection Content-Length Transfer-Encoding: chunked 本文作 ...

  9. mybatis报错 Specified class is an interface

    本文转自:http://blog.csdn.net/u014331288/article/details/53869303 1.错误原因 Caused by: org.springframework. ...

  10. NYOJ-------三角形

    Problem A 三角形 时间限制:1000 ms  |  内存限制:65535 KB   描述 在数学中,如果知道了三个点的坐标,我们就可以判断这三个点能否组成一个三角形:如果可以组成三角形,那么 ...