<!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. CSS3与动画有关的属性transition、animation、transform对比

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

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

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

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

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

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

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

  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. 使用属性动画 — Property Animation

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

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

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

随机推荐

  1. （报错解决）Exception encountered during context initialization

    转: (报错解决)Exception encountered during context initialization 关键词 JavaEE JavaWeb eclipse XML AspectJ ...

  2. 剑指 Offer 09. 用两个栈实现队列 +java中栈和队列的使用

    剑指 Offer 09. 用两个栈实现队列 题目链接 class CQueue { private Stack<Integer> sta1; private Stack<Intege ...

  3. SnowNLP——获取关键词（keywords(1)）

    一.SnowNLP的获取文本关键词 前面介绍了SnowNLP的获取关键词的方法,这里再重现一下 1 from snownlp import SnowNLP 2 # 提取文本关键词,总结3个关键词 3 ...

  4. STM32 ADC详细篇（基于HAL库）

    一.基础认识 ADC就是模数转换,即将模拟量转换为数字量 l  分辨率,读出的数据的长度,如8位就是最大值为255的意思,即范围[0,255],12位就是最大值为4096,即范围[0,4096] l  ...

  5. Java数据持久层

    一.前言 1.持久层 Java数据持久层,其本身是为了实现与数据源进行数据交互的存在,其目的是通过分层架构风格,进行应用&数据的解耦. 我从整体角度,依次阐述JDBC.Mybatis.Myba ...

  6. python基础（9）增强型赋值与使用普通赋值的区别

    前言 增强型赋值语句是经常被使用到的,因为从各种学习渠道中,我们能够得知i += 1的效率往往要比 i = i + 1 更高一些(这里以 += 为例,实际上增强型赋值语句不仅限于此).所以我们会乐此不 ...

  7. C语言入门-mingw64安装+配置

    OK,大家好,结合上期所说,本期让我们来配置编译器吧! 首先先下载mingw64离线包,官网下载慢,可以去群里下载,*.7z格式(有些同学可能没有解压软件,为了照顾这部分同学,笔者提供*.exe格式的 ...

  8. 史上超强拷贝仓——GitHub 热点速览 v.21.11

    作者:HelloGitHub-小鱼干 Clone-Wars 是真的强,能细数 70+ 知名应用网站的源码,即便你不看代码,也可以了解下各大网站的所用技术栈.同样很强的是用 OpenCV 实现的图片转 ...

  9. 利用flex解决input定位的问题

    用简单的布局搞定input框使用fixed下输入的问题 最近在做移动端H5聊天应用发现,当input框在最底部并且使用 position:fixed 属性的时候在苹果手机中会出现不兼容的情况 ​

  10. 跨端开发技术 | 拼团商城项目同时开发app和小程序的要点

    此项目为拼团商城类型,主要功能包括商品分类.商品详情.商品搜索.拼团.订单管理等. 项目源码在 https://github.com/apicloudcom/group-ec 仓库的 widget 目 ...