今天在寫一個zblog主題的時候，在無限下拉加載等待時間內，需要加一個動畫循環效果，如上圖！
1、簡單放大縮小循環！
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3圓圈動畫放大縮小循環動畫效果</title>
<style>
.dot {
margin: 150px auto;
width: 200px;
height: 200px;
background-color: #6190e8;
border-radius: 50%;
/*box-shadow: 0 0 10px rgba(0,0,0,.3) inset;*/
-webkit-animation-name: 'ripple';/*動畫屬性名，也就是我們前面keyframes定義的動畫名*/
-webkit-animation-duration: .5s;/*動畫持續時間*/
-webkit-animation-timing-function: ease; /*動畫頻率，和transition-timing-function是一樣的*/
-webkit-animation-delay: 0s;/*動畫延遲時間*/
-webkit-animation-iteration-count: infinite;/*定義循環資料，infinite為無限次*/
-webkit-animation-direction: alternate;/*定義動畫方式*/
}
@keyframes ripple {
0% {
/*opacity:0.35;*/
width:190px;
height:190px;
}
100% {
/*opacity: 0.2;*/
width:250px;
height:250px;
}
}
</style>
</head>
<body>
<div class="dot"></div>
</body>
</html>2、原地放大縮小，通過CSS進行調整！
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3圓圈動畫放大縮小循環動原地放大縮小</title>
<style>
*{padding: 0;margin: 0;}
.pagebar{margin: 0 auto;width: 30px;}
.page2{}
.dot {
margin: 0 auto;
width: 30px;
height: 30px;
background-color: #6190e8;
border-radius: 50%;
/*box-shadow: 0 0 10px rgba(0,0,0,.3) inset;*/
-webkit-animation-name: 'ripple';/*動畫屬性名，也就是我們前面keyframes定義的動畫名*/
-webkit-animation-duration: .5s;/*動畫持續時間*/
-webkit-animation-timing-function: ease; /*動畫頻率，和transition-timing-function是一樣的*/
-webkit-animation-delay: 0s;/*動畫延遲時間*/
-webkit-animation-iteration-count: infinite;/*定義循環資料，infinite為無限次*/
-webkit-animation-direction: alternate;/*定義動畫方式*/
}
@keyframes ripple {
0% {margin-left: 15px;margin-top: 15px;width:0;height:0;}
100% {margin-left: 0;margin-top: 0;width:30px;height:30px;}
}
</style>
</head>
<body>
<div class="pagebar">
<div class="dot"></div>
</div>
</body>
</html>