CSS3 之loading动画实现思路
效果大致如下：
主要实现方式：
该效果主要用到animation-timing-function中的steps()函数，该函数主要用于分步隐藏不同模块。
实现思路：
第一步动画：
第二步动画：
第三步动画：
第四步动画：
旋转半圆：
将gif动画分解为四步实现，每一步都是由旋转半圆旋转实现动画效果，再通过steps函数分步隐藏不同模块实现整个连贯动画。
全部代码：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title></title> 5 <meta charset=UTF-8 /> 6 <style> 7 .wrap { 8 width: 64px; 9 height: 64px; 10 position: relative; 11 } 12 .inner, .inner2 { 13 position: absolute; 14 width: 38px; 15 height: 38px; 16 border-radius: 40px; 17 overflow: hidden; 18 left: 13px; 19 top: 13px; 20 } 21 .inner { opacity: 1; background-color: #89abdd; 22 animation: second-half-hide 1.6s steps(1, end) infinite; 23 } 24 .inner2 { opacity: 0; background-color: #4b86db; 25 animation: second-half-show 1.6s steps(1, end) infinite; 26 } 27 .spiner, .filler, .masker { 28 position: absolute; 29 width: 50%; 30 height: 100%; 31 } 32 .spiner { 33 border-radius: 40px 0 0 40px; 34 background-color: #4b86db; 35 transform-origin: right center; 36 animation: spin 800ms infinite linear; 37 left: 0; 38 top: 0; 39 } 40 .filler { 41 border-radius: 0 40px 40px 0; 42 background-color: #4b86db; 43 animation: second-half-hide 800ms steps(1, end) infinite; 44 left: 50%; 45 top: 0; 46 opacity: 1; 47 } 48 .masker { 49 border-radius: 40px 0 0 40px; 50 background-color: #89abdd; 51 animation: second-half-show 800ms steps(1, end) infinite; 52 left: 0; top: 0; 53 opacity: 0; 54 } 55 56 .inner2 .spiner, .inner2 .filler { 57 background-color: #89abdd; 58 } 59 .inner2 .masker { 60 background-color: #4b86db; 61 } 62 63 /*旋转动画*/ 64 @keyframes spin { 65 0% { transform: rotate(360deg); } 66 100% { transform: rotate(0deg); } 67 } 68 /*分步显示动画*/ 69 @keyframes second-half-hide { 70 0% { opacity: 1; } 71 50%, 100% { opacity: 0; } 72 } 73 /*分步显示动画*/ 74 @keyframes second-half-show { 75 0% { opacity: 0; } 76 50%, 100% { opacity: 1; } 77 } 78 </style> 79 </head> 80 <body> 81 <body> 82 <div class="wrap"> 83 <div class="inner"> 84 <!-- 顶层旋转效果 --> 85 <div class="spiner"></div> 86 <!-- 右侧分步显示半圆 --> 87 <div class="filler"></div> 88 <!-- 左侧分步显示半圆 --> 89 <div class="masker"></div> 90 </div> 91 <div class="inner2"> 92 <div class="spiner"></div> 93 <div class="filler"></div> 94 <div class="masker"></div> 95 </div> 96 </div> 97 </body> 98 </html>
参考文章：http://www.zhangxinxu.com/wordpress/2014/04/css3-pie-loading-waiting-animation/
http://www.tuicool.com/articles/neqMVr
animation-timing-function
