CSS3 animation--写一个简单的loading动画

1.今天上午，去了大学城图书馆，拿了一本《大唐李白》，还没看两页就犯困了。也是醉了。。。。

看来还是喜欢玩点带有交互性的电脑。

2.HTML

<div class="loading-container">
		
			<div class="ball-container">
				<div class="ball-one">
				</div>

				<div class="ball-two">
				</div>

				<div class="ball-three">
				</div>
			</div>

			<div class="loading-description">
				加载中...
			</div>
</div>

2.CSS

body{
	font-family:"Microsoft YaHei";
}


.grid{  
    background-image:-webkit-linear-gradient(top,  
                    transparent 49px,  
                    #bfbebe 50px),  
                    -webkit-linear-gradient(left,  
                    transparent 49px,  
                    #bfbebe 50px);  
  
    background-size:50px 50px;  
    background-repeat:repeat;                     /*先画个网格，便于布局*/  
}

/*loading-container*/

.loading-container{
	position:absolute;
	margin-top:100px;
	margin-left:100px;
}

.ball-container::after{
	content:"";
	display:block;
	clear:both;
}

.ball-container div{
	position:relative;
	width:15px;
	height:15px;
	background-color:grey;
	float:left;
	border-radius:50%;
	margin-right:20px;
}

.ball-one{
	-webkit-animation-name:ball-animation;
	-webkit-animation-duration:1.5s;
	-webkit-animation-iteration-count: infinite;
}

.ball-two{
	-webkit-animation-name:ball-animation;
	-webkit-animation-duration:1.5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-delay:0.25s;
}

.ball-three{
	-webkit-animation-name:ball-animation;
	-webkit-animation-duration:1.5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-delay:0.5s;
}

/*加载描述信息*/
.loading-description{
	font-size:14px;
	text-align:left;
	padding-left:14px;
	color:grey;
}

@-webkit-keyframes ball-animation{
	0% {-webkit-transform:scale(0);opacity:0}

	75% {-webkit-transform:scale(1);opacity:1}
}