1. animation-delay
    这个属性是规定动画开始前等待几秒才开始。本来是很好理解的，但是当时就有个疑问：假如我的动画是连续执行好多次的情况下的话，是第一次执行前才会延迟还是每次执行前都会延迟呢？答案是：只有第一次会。
<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>delay</title>

<meta name="viewport" content="width=device-width, initial-scale=1" />

<style type="text/css">

    @-webkit-keyframes delay{

       

        99%{

            -webkit-transform:translate(100px,0);

        }

      

    }

    .delay{

        width:100px;height:100px;

        background-color: #000;

        -webkit-animation:delay 1s linear 2s infinite;

        animation:delay 1s linear 2s infinite;

    }

</style>

</head>

<body>

    <div class="delay"></div>

</body>

</html>

animation-fill-mode
该属性有四个值
none：默认值。不设置对象动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束或开始的状态
一开始比较纠结着三个到底有什么区别。网上也找了，发现网上说的有点错误。起码我试了一下forwards和both的效果是一模一样的。都是动画运行完了停在哪里就是哪里。至于backwards，就是总停在一开始的状态。

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>delay</title>

<meta name="viewport" content="width=device-width, initial-scale=1" />

<style type="text/css">

    @-webkit-keyframes delay{

       

        100%{

            -webkit-transform:translate(100px,0);

        }

      

    }

    .delay{

        width:100px;height:100px;

        background-color: #000;

        -webkit-animation:delay 1s linear 2 forwards alternate;

    }

</style>

</head>

<body>

    <div class="delay"></div>

</body>

</html>
<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>delay</title>

<meta name="viewport" content="width=device-width, initial-scale=1" />

<style type="text/css">

    @-webkit-keyframes delay{

       

        100%{

            -webkit-transform:translate(100px,0);

        }

      

    }

    .delay{

        width:100px;height:100px;

        background-color: #000;

        -webkit-animation:delay 1s linear 2 both alternate;

    }

</style>

</head>

<body>

    <div class="delay"></div>

</body>

</html>

    1. 两段代码主要说明在forwards和both的情况下动画在设置了反向运行偶次数时，效果仍然一样。因为之前看到网上说的是forwards在偶次数反向是会停在关键帧的100%处，而不是0%处。

    2. iteration-count
      运行次数。
      这个本来没什么好说的，一目了然，但是无意中发现，有以下的特殊情况：
      不能为负数
      可以为0          为0的时候，按1来算
      可以为小数         小数的时候，不会取整。而是多少就运行多少，比如 .5 就运行到50%的位置。

HTML动画（难点）的更多相关文章

  1. 亮相SIGGRAPH 太极拳三维教学App制作揭秘

    http://news.hxsd.com/CG-animation/201208/663303.html 编者按:<My Tai Chi>是一系列基于移动平台的三维互动产品,由北京七星汇工 ...

  2. 赵雅智：android教学大纲

    带下划线为详细内容链接地址.点击后可跳转.希望给大家尽一些微薄之力.眼下还在整理中 教学章节 教学内容 学时安排 备注 1 Android高速入门 2 Android模拟器与常见命令 3 Androi ...

  3. 简单的转盘抽奖——CSS动画优化

    前言 前两天去一家公司面试,被问到一些小游戏的东西.面试官提到了刷红包还有抽奖这些怎么实现,当时简单说了下思路,回来之后想想还是说的太轻描淡写了,干说不做就是耍流氓,所以就做了一个(Demo & ...

  4. 【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用

    动画在webapp的现状 webapp模式的网站追求的就是一个体验,是HTML5&CSS3浪潮下的产物,抛开体验不说,webapp模式门槛比较高: 而体验优化的一个重点便是动画,可以说动画是w ...

  5. 【WP 8.1开发】如何动态生成Gif动画

    相信如何为gif文件编码,很多朋友都会,而难点在于怎么让GIF文件中的帧动起来,也就是创建gif动画. Gif文件编码方法 先简单介绍一下编码的方法. 1.调用BitmapEncoder.Create ...

  6. iOS歌词逐渐变色动画

    实现歌词逐渐变色的动画,像卡拉OK一样可以根据时间进度来染色.效果如图:   因项目需求要实现一个类似歌词逐渐变色的效果,自己想来想去想不出来实现方案,还是得求助万能的google, 最终是找到了这篇 ...

  7. 【译】css动画里的steps()用法详解

    原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...

  8. iOS开发 QQ粘性动画效果

    QQ(iOS)客户端的粘性动画效果 时间 2016-02-17 16:50:00  博客园精华区 原文  http://www.cnblogs.com/ziyi--caolu/p/5195615.ht ...

  9. 第4章 jQuery的事件和动画（二）

    二. jQuery中的动画 动画在前面几章案例中是回避不了的问题.此处结合一些简便的写法稍作系统的分析. 1. show()和hide()(1)介绍——不用过多的介绍了jQuery最基本的方法.本质是 ...

随机推荐

  1. GO语言可以直接输出数组

    package main import "fmt" func main(){ ]int ;i<;i++{ arr[i]=i } fmt.Printf("%v&quo ...

  2. Responder一点也不神秘————iOS用户响应者链完全剖析

    一.事件分类 对于IOS设备用户来说,他们操作设备的方式主要有三种:触摸屏幕.晃动设备.通过遥控设施控制设备.对应的事件类型有以下三种: 1.触屏事件(Touch Event) 2.运动事件(Moti ...

  3. 再转一篇gtest1.6安装

    http://www.cppblog.com/izualzhy/archive/2012/07/31/185772.html googletest是一个用来写C++单元测试的框架,它是跨平台的,可应用 ...

  4. void (*fun)(void);

    2440test程序中的Main.c中在结构体中有这么一句: void (*fun)(void); 后查阅资料得知这句代码的意思是: 定义一个函数指针. 比如:定义一个指向函数的指针,该函数有一个整形 ...

  5. wpf只运行一个实例

    原文:wpf只运行一个实例 在winform下,只运行一个实例只需这样就可以: 1． 首先要添加如下的namespace: using System.Threading; 2． 修改系统Main函数, ...

  6. EXTJS4:在grid中加入合计行

    extjs4很方便的实现简单的合计(针对在不分页的情况下): 它效果实现在:Ext.grid.feature.Summary这个类中 Ext.define('TestResult', { extend ...

  7. svn由于连接方在一段时间后没有正确答复或连接的主机没有反应连接尝试失败

    解决方法,关掉防火墙, service iptables status 查看iptables状态 service iptables restart iptables服务重启 service iptab ...

  8. Linux企业级项目实践之网络爬虫（4）——主程序流程

    当我们设计好程序框架之后就要开始实现它了.第一步当然是要实现主程序的流程框架.之后我们逐渐填充每个流程的细节和其需要调用的模块. 主程序的流程如下: 1.  解析命令行参数,并根据参数跳转到相应的处理 ...

  9. linux下core文件设置(转)

    在程序不寻常退出时,内核会在当前工作目录下生成一个core文件(是一个内存映像,同时加上调试信息).使用gdb来查看core文件,可以指示出导致程序出错的代码所在文件和行数. 1.core文件的生成开 ...

  10. VMWare 虚拟机

    http://pan.baidu.com/share/link?shareid=5873&uk=941708466 VMWare是虚拟化解决方案厂商,旗下有多款虚拟机软件产品,其中最知名的要数 ...