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. springboot 使用idea打包 遇到问题

    找了很久错误后来发现添加这三句话就可以了 需要在项目的pom.xml文件中加上第47-49行的3句话

  2. ActiveMQ学习总结（10）——ActiveMQ采用Spring注解方式发送和监听

    对于ActiveMQ消息的发送,原声的api操作繁琐,而且如果不进行二次封装,打开关闭会话以及各种创建操作也是够够的了.那么,Spring提供了一个很方便的去收发消息的框架,spring jms.整合 ...

  3. Redis学习总结（2）——Java使用Redis

    安装 开始在 Java 中使用 Redis 前, 我们需要确保已经安装了 redis 服务及 Java redis 驱动,且你的机器上能正常使用 Java. Java的安装配置可以参考我们的 Java ...

  4. oracle 增量备份恢复策略(基础知识)

    EXP和IMP是Oracle提供的一种逻辑备份工具.逻辑备份创建数据库对 象的逻辑拷贝并存入一个二进制转储文件.这种逻辑备份需要在数据库启动的情况下使用, 其导出实质就是读取一个数据库记录集(甚至可以 ...

  5. 同余方程 2012年NOIP全国联赛提高组

    时间限制: 1 s   空间限制: 128000 KB 题目描述 Description 求关于 x 同余方程 ax ≡ 1 (mod b)的最小正整数解. 输入描述 Input Descriptio ...

  6. 洛谷—— P1092 虫食算

    https://www.luogu.org/problem/show?pid=1092 题目描述 所谓虫食算,就是原先的算式中有一部分被虫子啃掉了,需要我们根据剩下的数字来判定被啃掉的字母.来看一个简 ...

  7. HDU 4542

    T_T终于让我过了,坑啊,竟然时限是200ms... 我是预处理出不整除了个数的,因为这个较容易一点.利用算术基本定理,f=p1^a1*p2^a2...... 所以,整除它的个数就是(a1+1)*(a ...

  8. 【Hibernate学习】 ——ORM（四）再次认识实体继承

    在信用办时.做失信.守信.黑名单这一块的时候.先把原来的需求看了看.紧接着就開始设计实体,这一块大部分都是同样的信息,所以就设计了一个实体,而且用一个状态标识出来是失信.守信还是黑名单. 在之后的改动 ...

  9. 关于isset的一点说明

    作者:zhanhailiang 日期:2014-10-08 今天遇到一个非常奇怪的bug,測试例如以下: <? php $a = 'abc'; var_dump(isset($a['code'] ...

  10. C++对象内存布局 （二）

    在上一篇文章中讨论了C++单一一般继承的对象内存布局http://www.cnblogs.com/uangyy/p/4621561.html 接下来继续讨论第二种情况: 2.单一的虚拟继承:有成员变量 ...