多個webkit動畫

我試圖一次運行多個webkit動畫。演示可以be seen here：多個webkit動畫

HTML：

<body> 
    <div class="dot"></div> 
</body>

的JavaScript：

$(function(){ 

    $('body').append('<div class="dot" style="left:100px; top:200px"></div>'); 


});

CSS：

body{ 
    background: #333; 
} 

.dot{ 
    background: -webkit-radial-gradient(center, ellipse cover, #f00 90%, #fff 10%); 
    border-radius: 6px; 
    background: red; 
    display: block; 
    height: 6px; 
    position: absolute; 
    margin: 40px 0 0 40px; 
    width: 6px; 
    -webkit-box-shadow: 0 0 2px 2px #222; 




    -webkit-animation: shrink 2.s ease-out; 

    -webkit-animation: pulsate 4s infinite ease-in-out; 
    } 


    @-webkit-keyframes shrink{ 
    0%{ 
     -webkit-box-shadow: 0 0 2px 2px #222; 
     -webkit-transform: scale(2); 
    } 
    50%{ 
     -webkit-box-shadow: 0 0 2px 2px #222; 
      -webkit-transform: scale(1.5); 
     } 
    100%{ 
     -webkit-box-shadow: 0 0 2px 2px #222; 
      -webkit-transform: scale(1); 
     } 
    } 

    @-webkit-keyframes pulsate{ 
     0%{ 
      -webkit-transform: scale(1); 
     -webkit-box-shadow: 0 0 2px 2px #222; 
     } 
     50%{ 
      -webkit-transform: scale(1.1); 
     -webkit-box-shadow: 0 0 2px 2px #111; 
     } 
    100%{ 
      -webkit-transform: scale(1); 
     -webkit-box-shadow: 0 0 2px 2px #222; 
     } 
    }

.DOT有兩個動畫：

收縮
搏動（很難看到，但它的存在）

也許我需要找到一個很好的方式同步它們。一旦收縮動畫完成，脈動。我無法同時運行它們，因此pulsate在.dot中被註釋掉了。

有什麼建議嗎？謝謝。

來源

2012-09-25 ialphan

我實際上沒有看到任何動畫正在進行。 –

@MadaraUchiha Pulsate是目前的動畫，真的很難看。尋找周圍的陰影（縮放可能有所幫助）。謝謝。 – ialphan

不，即使放大後，我也不能說一件事。我的檢查員在動畫屬性中告訴我「無效的屬性值」。 –

可以用,如果需要分隔多個動畫，並設置在所述第二一個的延遲：在第二動畫

-webkit-animation: shrink 2s ease-out, pulsate 4s 2s infinite ease-in-out;

2s是延遲

由於鉻43和Safari 9/9.2，-webkit-前綴僅適用於Blackberry和UC（Android）瀏覽器。所以新的正確語法將是

animation: shrink 2s ease-out, pulsate 4s 2s infinite ease-in-out;

來源

2012-09-25 20:33:39 Giona

就是這樣。謝謝。 – ialphan

動畫簡寫爲：名稱持續時間延遲。所以會 'pulsate 4s緩解2s無限' – BlueSix

+10

奇怪。這似乎不適用於我。它只尊重第一個動畫，而不是第二個動畫。 – Tyguy7

多個webkit動畫

回答

相關問題