1.首先看效果
 

2、代码及分析
 <style type="text/css">

        #div1

        {

            margin:100px;

            position: absolute;

            text-align: center;

            background: #abcdef;

            width: 300px;

            height: 20px;

            line-height: 20px;

        }

@-webkit-keyframes move

{

    0%

    {

        -webkit-transform:translateY(0px)

    }    

    100%

    {

        -webkit-transform:translateY(-15px)

    }

}

#div1 span:nth-of-type(1){  -webkit-animation:.5s move alternate infinite; }

#div1 span:nth-of-type(2){  -webkit-animation:.5s .1s move alternate infinite;}

#div1 span:nth-of-type(3){  -webkit-animation:.5s .2s move alternate infinite;}

#div1 span:nth-of-type(4){  -webkit-animation:.5s .3s move alternate infinite;}

#div1 span:nth-of-type(5){  -webkit-animation:.5s .4s move alternate infinite;}

#div1 span:nth-of-type(6){  -webkit-animation:.5s .5s move alternate infinite;}

#div1 span:nth-of-type(7){  -webkit-animation:.5s .6s move alternate infinite;}

#div1 span:nth-of-type(8){  -webkit-animation:.5s .7s move alternate infinite;}

    </style>

</head>

<body>

    <div id="div1">

 <span>正</span> <span>在</span> <span>加</span> <span>载</span> <span>中</span><span>.</span><span>.</span><span>.</span>

    </div>

</body>
------------------------------------------------------------------------------
alternate infinite alternate:动画循环执行,infinite:执行无限次 
--分析：1、按照顺序的执行，也就是说延迟时间会逐渐增加
解释：  -webkit-animation:.5s/*执行时间*/ .1s/*延迟时间*/ move alternate infinite;} 
查看效果(建议用Chrome浏览器): http://www.tuzizjf.com/project/css30812.html

css3动画之1--animation小例子的更多相关文章

  1. Css3动画-@keyframes与animation

    一.@keyframe 定义和用法 @keyframes是用来创建帧动画的,我们通过这个属性可以用纯css来实现一些动画效果. 一般格式是: @keyframes 动画名称{ 0%{ 动画开始时的样式 ...

  2. CSS3动画产生圆圈由小变大向外扩散的效果

    涉及到 CSS3 的动画(animation).2D 转换(transform: scale),具体如代码所示. github: https://github.com/wind-stone/CSS3- ...

  3. CSS3动画 相比JS Animation 哪个更快?

    CSS vs. JS Animation: 哪个更快? 基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且,Adobe和 Google竟然一直在发布可以媲美原生应 ...

  4. CSS3动画属性之Animation

    首先定义一个动画规则: @keyframes mymove { from {top:0px;} to {top:200px;} } @-moz-keyframes mymove /* Firefox ...

  5. CSS3动画效果之animation

    先解决上一篇的遗留问题. div { width: 300px; height: 200px; background-color: red; -webkit-animation: test1 2s; ...

  6. CSS3动画 transition和animation的用法和区别

    transition和animation都是CSS3新增的特性,使用时需要加内核 浏览器 内核名称 W3C   IE  -ms-  Chrome/Safari -webkit-   Firefoc - ...

  7. css3动画入门transition、animation

    css3动画 transition.animation CSS3 transition demo <!DOCTYPE html> <html> <head> < ...

  8. CSS3动画的使用

    0921自我总结 CSS3动画的使用 一.动画的创建 @keyframes规则是创建动画 浏览器兼容 1.@keyframes myfirst 2.@-webkit-keyframes myfirst ...

  9. 30分钟玩转css3动画， transition，animation

    其实css3动画是就是2种实现,一种是transition,另一种就是animation.transition实现的话就是只能定制开始帧,和结束2帧:而animation实现的话可以写很多关键帧.没有 ...

  10. CSS3 动画animation

    关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...

随机推荐

  1. Secret of Chocolate Poles （Aizu1378——dp）

    Select Of Chocolate Poles 题意:有一个竖直放置的高度为l cm的盒子,现在有三种方块分别为1cm的白块,1cm的黑块,k cm的黑块,要求第一块放进去的必须是黑色的,盒子最上 ...

  2. 1.4.1 安装Python扩展库

    Python之所以得到各行业领域工程师.策划师以及管理人员的青睐,与涉及各行业各领域开发的扩展库也有很大关系,不仅数量众多.功能强大,关键是用起来很方便.虽然Python标准库已经拥有了非常强大的功能 ...

  3. go 语言优势

    一:为什么用Go来做抽奖系统 1.Go  vs PHP/JAVA ①:高并发,Go协程优于PHP多进程,JAVA多线程模式 ②:高并发,编译后的二进制优于PHP解释型,JAVA虚拟机 3:高效网络模型 ...

  4. 【Codeforces 1106D】Lunar New Year and a Wander

    [链接] 我是链接,点我呀:) [题意] 让你遍历n个节点,访问过的节点不操作. 如果是没有访问过的点,那就把它加到序列的末尾. 问你形成的最小字典序的序列是多少. [题解] 显然每次找最小的标号 用 ...

  5. noip模拟赛 逃避

    题目描述 给定一篇只含有大小写字母,空格以及 ′.′(不含引号)的长度为 L 的文章.文章被若干个 ′.′ 划分 成若干个句子,句子被若干个空格划分成单词.你需要将文章中每个句子第一个单词的首字母改成 ...

  6. [TS-A1486][2013中国国家集训队第二次作业]树[树的重心，点分治]

    首先考虑暴力,可以枚举每两个点求lca进行计算,复杂度O(n^3logn),再考虑如果枚举每个点作为lca去枚举这个点的子树中的点复杂度会大幅下降,如果我们将每个点递归考虑,每次计算过这个点就把这个点 ...

  7. 用keil编写的 C51错误 *** WARNING L1: UNRESOLVED EXTERNAL SYMBOL SYMBOL: ?C_START

    可能原因: 替换工程的文件未先 remove该文件. 正常替换文件步骤: 1. 右键 欲 替换的文件,remove  XXXXX.c from build  ----> remove  XXXX ...

  8. N天学习一个linux命令之ip

    用途 show / manipulate routing, devices, policy routing and tunnels 用法 通用格式 ip [ OPTIONS ] OBJECT { CO ...

  9. VS2010: 远程访问IIS Express

    可以远程访问IIS Express的意义在于:1.    可以从其它设备上Debug项目,这点对于手持设备等不是很容易用虚拟机虚拟的设备尤为重要.2.    可以避免过早配置IIS 7(不一定是好事. ...

  10. android注解使用具体解释（图文）

    在使用Java的SSH框架的时候,一直在感叹注解真是方便啊,关于注解的原理,大家能够參考我的还有一片文章Java注解具体解释. 近期有时间研究了android注解的使用,今天与大家分享一下. andr ...