1.首先看效果2、代码及分析
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小例子
时间： 2024-11-13 11:37:49