CSS3＆jQuery動畫

Question

我有一個使用CSS3動畫的加載圓。到目前爲止，我已經編寫了一些jQuery，它在加載圓動畫完成後顯示一個div容器。是否有可能在完全CSS的代碼jQuery？任何幫助深表感謝。

CSS：

/*Loading Circle*/ 

.x { 
    height: 15px; 
    width: 15px; 
    background: #dedede; 
    border-radius: 50px; 
    display: inline-block; 
} 


.a {animation: fade 1s forwards;} 
.b {animation: fade 2s forwards;} 
.c {animation: fade 3s forwards;} 


@keyframes fade { 
0% {opacity:0;} 
50% {opacity:1;} 
100% {opacity:0;}} 





/*Empty Container*/ 

.container { 
    display:none; 
    background: #dedede; 
    height: 100px; 
    width: 100px; 

} 

JS：

function setup() { 
    var e = document.getElementById("lastDot"); 
    e.addEventListener("animationend", function(){$("#mydiv").show();}, false); 
} 

setup() 

HTML：

<div class="a x"></div> 
<div class="b x"></div> 
<div class="c x" id="lastDot"></div> 

<div class="container" id="mydiv"></div>​ 

jsFiddle

Answer 1

只要這是爲了美觀，這應該是你在找什麼：

.container { 
    animation: timer 3s forwards; 
} 

@keyframes timer { 
    0% { opacity: 0; } 
    80% { opacity: 0; } 
    100% { opacity: 1;} 
} 

Remeber不使用display:none這些CSS3動畫否則他們將不會展示。我所做的只是創建另一個最初隱藏元素的CSS3動畫，並且在80％時將不透明度設置爲0（再次），因此您可以從80％開始淡入淡出到100％。

要記住的另一件事是您的瀏覽器與此兼容。只需添加到每個動畫關鍵幀和函數開始（我正在關鍵幀功能爲例）：

@keyframes example { } 
@-moz-keyframes example { } /* Firefox */ 
@-webkit-keyframes example { } /* Safari and Chrome */ 
@-o-keyframes example { } /* Opera */