下一代CSS3之动画
效果：
代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>逆水行舟不进则退</title>
<style>
div{
width: 10px;
height: 10px;
border-radius: 50%;
background-color: red;
position: relative;
animation: mine 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes mine {
0%{background-color: red;left: 0;top: 0}
100%{background-color: blue;left: 400px;top: 0}
}
</style>
</head>
<body>
<div></div>
<div style="animation-delay: 0.5s"></div>
<div style="animation-delay: 1s"></div>
<div style="animation-delay: 1.5s"></div>
<div style="animation-delay: 2s"></div>
<div style="animation-delay: 2.5s"></div>
<div style="animation-delay: 3s"></div>
<div style="animation-delay: 3.5s"></div>
<div style="animation-delay: 4s"></div>
<div style="animation-delay: 4.5s"></div>
<div style="animation-delay: 5s"></div>
<div style="animation-delay: 5.5s"></div>
<div style="animation-delay: 6s"></div>
<div style="animation-delay: 6.5s"></div>
<div style="animation-delay: 7s"></div>
<div style="animation-delay: 7.5s"></div>
<div style="animation-delay: 8s"></div>
<div style="animation-delay: 8.5s"></div>
<div style="animation-delay: 9s"></div>
<div style="animation-delay: 9.5s"></div>
<div style="animation-delay: 10s"></div>
<div style="animation-delay: 10.5s"></div>
<div style="animation-delay: 11s"></div>
<div style="animation-delay: 11.5s"></div>
<div style="animation-delay: 12s"></div>
<div style="animation-delay: 12.5s"></div>
<div style="animation-delay: 13s"></div>
<div style="animation-delay: 13.5s"></div>
<div style="animation-delay: 14s"></div>
<div style="animation-delay: 14.5s"></div>
<div style="animation-delay: 15s"></div>
<div style="animation-delay: 15.5s"></div>
<div style="animation-delay: 16s"></div>
<div style="animation-delay: 16.5s"></div>
<div style="animation-delay: 17s"></div>
<div style="animation-delay: 17.5s"></div>
<div style="animation-delay: 18s"></div>
<div style="animation-delay: 18.5s"></div>
<div style="animation-delay: 19s"></div>
<div style="animation-delay: 19.5s"></div>
<div style="animation-delay: 20s"></div>
<div style="animation-delay: 20.5s"></div>
<div style="animation-delay: 21s"></div>
<div style="animation-delay: 21.5s"></div>
<div style="animation-delay: 22s"></div>
<div style="animation-delay: 22.5s"></div>
<div style="animation-delay: 23s"></div>
<div style="animation-delay: 23.5s"></div>
<div style="animation-delay: 24s"></div>
<div style="animation-delay: 24.5s"></div>
<div style="animation-delay: 25s"></div>
<div style="animation-delay: 25.5s"></div>
<div style="animation-delay: 26s"></div>
<div style="animation-delay: 26.5s"></div>
<div style="animation-delay: 27s"></div>
<div style="animation-delay: 27.5s"></div>
<div style="animation-delay: 28s"></div>
<div style="animation-delay: 28.5s"></div>
<div style="animation-delay: 29s"></div>
<div style="animation-delay: 29.5s"></div>
<div style="animation-delay: 30s"></div>
<div style="animation-delay: 30.5s"></div>
<div style="animation-delay: 31s"></div>
<div style="animation-delay: 31.5s"></div>
<div style="animation-delay: 32s"></div>
<div style="animation-delay: 32.5s"></div>
<div style="animation-delay: 33s"></div>
<div style="animation-delay: 33.5s"></div>
<div style="animation-delay: 34s"></div>
<div style="animation-delay: 34.5s"></div>
<div style="animation-delay: 35s"></div>
<div style="animation-delay: 35.5s"></div>
<div style="animation-delay: 36s"></div>
</body>
</html>