添加兩個CSS3動畫？

我正在嘗試將類似Minecraft的樣式應用於div元素。最終的結果應該是這個樣子的：「如果不正常則返回結束」消息：添加兩個CSS3動畫？

minecraft

快速旁註：對於那些你們誰沒有玩過遊戲，隨機行從一個特定的文件被讀取並且它的內容顯示爲當天的消息。它會進出並抓住你的注意力。

文字陰影，字體和跳動動畫已完成。然而，當我嘗試應用第二個動畫，它將覆蓋悸動動畫（這意味着它不會感到緊張，但旋轉）

我的CSS如下：

#random-message { 
    /* font/text stuff */ 
    animation:minecraft, minecraft-rotate 0.5s infinite; 
    -webkit-animation:minecraft 0.5s infinite; /* Safari and Chrome */ 
}

動畫minecraft施加transform: scale效果，並且minecraft-rotate適用transform: rotate效果。

實現旋轉效果而不忽略我的跳動效果的最佳方式是什麼？

來源

2013-08-25 mattbdean

你不想有一個旋轉動畫...你想旋轉的div。只需將transform: rotate(340deg);行添加到css塊即可。

來源

2013-08-25 20:39:56 Christian

不過，最後一個動畫/轉換覆蓋了第一個。如果我先設置了動畫，然後旋轉，它似乎只能旋轉。如果首先應用旋轉，情況會相反。 – mattbdean

在這種情況下，只需旋轉容器。 – Christian

哦。 Hur dur。有點新，對不起：/ – mattbdean

任何給定的元素在任何給定時間只能有一個變換。任何同時設置2次轉換的嘗試都會導致其中一個被覆蓋。

您可以：

1）設置兩個div，一個在另一個內部，並應用不同的變換，家長和孩子。

2）構建複合變換。在動畫的情況下，這意味着要爲每個幀創建複合變換。

來源

2013-08-25 20:52:11 vals

添加兩個CSS3動畫？

回答

相關問題