css3动画之1--animation小例子 

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
posted @ 2014-08-12 13:43  哈哈2222  阅读(2148)  评论(0)  编辑  收藏  举报