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. Ubuntu网卡设置：配置/etc/netplan

    对于Ubuntu1804版本,经过测试如下配置可以设置静态IP地址: Google@ubuntu:~$ cat /etc/netplan/01-netcfg.yaml network: etherne ...

  2. Vivaldi解决flash插件问题

    Vivaldi浏览器 Vivaldi是Opera联合创始人.前CEO谭咏文(Jon von Tetzchner)2015年1月27日发布的一款浏览器,具有个性化的笔记功能,带有迷你屏幕截图的书签,以及 ...

  3. 我理解的数据结构（二）—— 栈（Stack）

    我理解的数据结构(二)-- 栈(Stack) 一.栈基础 栈是一种线性结构 相比较数组,栈对应的操作是数组的子集 只能从一端添加元素,也只能从同一端取出元素,这一端称为栈顶 栈是一种后进先出的数据结构 ...

  4. 机器学习中jupyter lab的安装方法以及使用的命令

    安装JupyterLab使用pip安装: pip install jupyterlab# 必须将用户级目录添加 到环境变量才能启动pip install --userbinPATHjupyter la ...

  5. 方便简单的远程控制：putty和WinSCP

    记录一下WinSCP和putty的用法. putty:远程cmd窗口,在本机通过命令行操作服务器,并且拿到运行结果.而本机只有连接作用,大大减小了负担. 登陆界面输入ip地址,没有特殊情况,默认选项就 ...

  6. 《hello-world》第八次团队作业：Alpha冲刺-Scrum Meeting 5

    项目 内容 这个作业属于哪个课程 2016级计算机科学与工程学院软件工程(西北师范大学) 这个作业的要求在哪里 实验十二 团队作业8:软件测试与Alpha冲刺 团队名称 <hello--worl ...

  7. [bzoj2086][Poi2010]Blocks_单调栈_双指针

    Blocks bzoj-2086 Poi-2010 题目大意:题目链接. 注释:略. 想法:首先,不难发现,如果连续的一段数的平均值不小于输入的k的话,这段数是满足题意的. 所以,我们再次简化一下:将 ...

  8. Java web如何定位工程路径

    一 项目路径的获得 System.getProperty("user.dir"); 可以获得当前用户的工作目录,即在哪个地方启动的java程序,返回就是当前目录 二 web项目根目 ...

  9. spring mvc dispatcherservlet处理request流程

    1.dispatcherservlet接收到请求后,doDispatch(request,response) 2.doDispatch()里进行handlermapping,handlermappin ...

  10. Flash-制作空心文字

    常常看到站点上用很多空心文字作为站点的名称或者特色项目的名称等等,那这些空心文字是怎么做出来的呢? 用Flash事实上非常快就能做出来.过程例如以下: (1)新建空白文件.工具箱中选择"文本 ...