CSS动画的使用

 

1.跳动

<div class="ball1">1</div>
<div class="ball2">2</div>
<div class="ball3">3</div>

.ball1 {
	 animation: move .6s ease-in infinite alternate;
}

.ball2 {
	 animation: move .5s ease-in infinite alternate;
}

.ball3 {
	 animation: move .4s ease-in infinite alternate;
}

@keyframes move {
	100% {
	    transform: translateY(30px);
	}
}

2.加载

.loading {
		  width: 40px;
		  height: 40px;
		  border-width: 2px;
		  border-style: solid;
		  border-color: #fff #fff #000 #000;
		  border-radius: 50%;
		  animation: loading 1s ease-in-out infinite;
		}
		@keyframes loading {
		  0% {
		    transform: rotate(0deg);
		  }
		  100% {
		    transform: rotate(360deg);
		  }
		}

 <div class="loading">页面加载</div>