CSS3關鍵幀動畫，包括延遲，與JS切換

我想動畫（淡入）3個按鈕。這是我的html：CSS3關鍵幀動畫，包括延遲，與JS切換

<aside> 
    <p><a href="#"><i class="icon-facebook"></i> Share</a></p> 
    <p><a href="#"><i class="icon-twitter"></i> Tweet</a></p> 
    <p><a href="#"><i class="icon-envelope"></i> Mail</a></p> 
</aside>

，這是我的CSS（類.aside檢查得到由JavaScript應用）

.aside-check { 
    animation: fadein 2s; 
} 

@keyframes fadein { 
    from {opacity:0;} 
    to {opacity:1;} 
}

我現在想什麼，就是給每一段有點延遲，我試過

p:nth-child(1) {animation-delay:2s} 
p:nth-child(2) {animation-delay:3s} 
p:nth-child(3) {animation-delay:4s}

但這並不起作用。不幸的是，我不知道我做錯了什麼...：/

來源

2013-05-21 Paranoia

那麼，首先你需要將動畫應用到段落而不是旁邊。永遠記住，動畫不會繼承。其次，不要忘記你的webkit前綴！這是一種痛苦，但webkit瀏覽器在所有動畫屬性和關鍵幀定義之前仍然需要-webkit。如果沒有它，你的動畫將無法正常工作，Chrome瀏覽器，Safari瀏覽器，Android等等（如果你不記得是否需要前綴看看caniuse.com http://caniuse.com/#feat=css-animation）

另外請注意，如果你想要段落被隱藏，然後顯示出來，你會希望用0的不透明度來定義它們，然後設置'動畫填充模式'來轉發，以便'動畫'框架中的屬性在動畫結束後保持不動。

我做了一個JS小提琴與一個工作的例子，希望它有幫助！

http://jsfiddle.net/Ashwell/HqBZU/

這裏是重要的位：的動畫應用到段落與填充模式，並開始混濁。

.aside-check > p{ 
    animation: fadein 2s; 
    -webkit-animation: fadein 2s; 
    animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards; 
    opacity: 0; 
}

您還需要WebKit的關鍵幀

@-webkit-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}

而且不要忘記添加-webkit-animation-delay: 2s;到每個第n個孩子選擇與尊重延遲時間！

我希望這個答案不會太遲！

來源

2013-11-01 03:31:35 ashwell

CSS3關鍵幀動畫，包括延遲，與JS切換

回答

相關問題