css3 扇形動畫

扇形動畫，由於我工做中遇到了只執行一次就ok，因此沒細研究，該css暫時只能執行1次扇形動畫，無限循環會有問題。

css:

@keyframes rotateAn{
    0%{transform: rotate(0deg); }
    99%{ transform: rotate(180deg); opacity: 0.8; }
    100%{ transform: rotate(180deg); opacity: 0; }
}
*{margin: 0; padding: 0;}
.circle-dev{ width: 200px; height: 200px; border-radius: 100px; overflow: hidden; position: relative; }
.circle-bg, .circle-alt{ width: 100%; height: 100%; border-radius: 50%; background: #ccc; position: absolute; top: 0; left: 0; }
.circle-alt{ opacity: 0.4; }
.circle-alt-lft, .circle-alt-rht{ position: absolute; width: 50%; height: 100%; top:0; }
.circle-alt-lft{left: 0; overflow: hidden; border-radius: 50% 0 0 50%; }
.circle-alt-lft:after{ background: #fff; opacity: 0.8; display: block; content: ""; width: 100%; height: 100%; transform-origin: right center; animation: rotateAn 1s 1s linear forwards;}
.circle-alt-rht{ right: 0; overflow: hidden; border-radius: 0 50% 50% 0; }
.circle-alt-rht:after{ background: #fff; opacity: 0.8; display: block; content: ""; width: 100%; height: 100%; transform-origin: left center; animation: rotateAn 1s linear forwards;}

html:

<div class="circle-dev">
    <div class="circle-bg"></div>
    <div class="circle-alt">
        <div class="circle-alt-lft"></div>
        <div class="circle-alt-rht"></div>
    </div>
</div>

 ps：我這裏爲了省事簡化了，css3上少了webkit前綴，在移動端上使用時，必定要在css3的上面加上-webkit-。這裏須要加上-webkit-的是：

transform-origin、

animation、

keyframes、

transform

重要的事情說三遍：

加上-webkit-！加上-webkit-！加上-webkit-！不然移動端上將會出錯。