animation: moveToRight .75s 6s linear infinite ;
animation: moveToRight -.75s 1.5s linear infinite;
當動畫有兩個參數時，
若是兩個都是正整數，第一個是持續的時間，第二個是動畫延遲時間；
若第一個是負數，則取該時間的絕對值視為延遲時間，第二個為持續時間。
雖然延遲動畫為負數時可以取其絕對值為延遲時間，但負數有它存在的用意。如下動畫，一刷新就會有一輪明顯的白圈，那是在動畫沒有開始時元素的正常狀態，在設置延遲時間為負數時就不會出現這樣效果。
transform-origin: 0 25px;/* 這個屬性決定環繞園大小 */
以上結論來自於研究該案例：https://github.com/huruji/loading 所得，感謝大佬無私分享。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { position: relative; padding: 80px; background-color: #ffaa00; } span { position: absolute; width: 50px; height: 50px; border-radius: 50%; background: transparent; border: 2px solid #fff; } /* */ span:nth-child(1) { animation: loader6 .8s cubic-bezier(0.21, 0.53, 0.56, 0.8) .24s infinite; /*animation: loader6 .8s cubic-bezier(0.21, 0.53, 0.56, 0.8) -.24s infinite;*/ } span:nth-child(2) { animation: loader6 .8s cubic-bezier(0.21, 0.53, 0.56, 0.8) .12s infinite; /*animation: loader6 .8s cubic-bezier(0.21, 0.53, 0.56, 0.8) -.12s infinite;*/ } span:nth-child(3) { animation: loader6 .8s cubic-bezier(0.21, 0.53, 0.56, 0.8) 0s infinite; } @keyframes loader6 { 0% {-webkit-transform: scale(0.1);opacity: 0.1;} 20% {-webkit-transform: scale(0.5);opacity: 1;} 100% {-webkit-transform: scale(1);opacity: 0.5;} } </style> </head> <body> <div> <span></span> <span></span> <span></span> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body {padding: 100px} .loader { width: 150px; font-size: 0; text-align: center; border: 1px solid #ffaa00; } span { display: inline-block; width: 15px; height: 15px; background-color: #EB4E01; border-radius: 50%; } span:first-child { animation: moveToLeft infinite 1.5s linear; } span:last-child { /* animation: moveToRight infinite .75s 6s linear; 當動畫有兩個參數時，若是兩個都是正整數，第一個是持續的時間，第二個是動畫延遲時間； 若第一個是負數，則取該時間的絕對值視為延遲時間，第二個為持續時間 */ /* 也可：為什么是 .75s 呢，因為當動畫在 50% 時其實可以看成一個來回結束，這個來回結束在總持續時間占一半。 animation: moveToRight 1.5s .75s linear infinite; */ animation: moveToRight -.75s linear 1.5s infinite; } @keyframes moveToLeft { 0% {transform: translateX(0)} 25% {transform: translateX(-30px)} 50% {transform: translateX(0)} 100% {transform: translateX(0)} } @keyframes moveToRight { 0% {transform: translateX(0)} 25% {transform: translateX(30px)} 50% {transform: translateX(0)} 100% {transform: translateX(0)} } </style> </head> <body> <div class="loader"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </body> </html>