如何在多個CSS動畫之間切換？

在這裏，我有許多不同的動畫幀和時間的精靈。如何在多個CSS動畫之間切換？

我想在同一個地方使用這些不同的風格。

我試圖做到這一點的div元素改變類

file1.css

.hi1 { 
    width: 800px; 
    height: 100px; 
    background-image: url("spritesONE.png"); 
    animation: play 20s steps(8) infinite; 
    } 
    @keyframes play { 
      from { background-position: 0px; } 
      to { background-position: -100px; } 
    }

file2.css

.hi2 { 
    width: 500px; 
    height: 100px; 
    background-image: url("spritesTWO.png"); 
    animation: play 2s steps(5) infinite; 
    } 
    @keyframes play { 
      from { background-position: 0px; } 
      to { background-position: -100px; } 
    }

HTML

個

<link rel="stylesheet" type="text/css" href="file1.css" /> 
<link rel="stylesheet" type="text/css" href="file2.css" /> 
<link rel="stylesheet" type="text/css" href="file3.css" /> 
... 
<div id="test" class="hi1"></div>

document.getElementById('test').className="hi2"; //CHANGE TO CLASS hi1, hi3, ..

它改變了類，但在包括多個CSS，動畫拿到破...

來源

2014-10-29 Hernán Eche

你可以創建一個小提琴來展示這個問題嗎？另外我不確定將css分成不同文件的好處是什麼。爲什麼不能看到單個文件，因爲類名不一樣，所以已經存在差異？ – Coop 2014-10-29 22:51:55

我想這個問題是你」重新使用相同的關鍵幀動畫名稱。據MDN，

如果給定的名稱存在多個關鍵幀集，遇到的最後一個使用。

試圖給他們唯一的名稱，如：

.hi1 { 
    width: 800px; 
    height: 100px; 
    background-image: url("spritesONE.png"); 
    animation: hi1-play 20s steps(8) infinite; 
    } 
    @keyframes hi1-play { 
      from { background-position: 0px; } 
      to { background-position: -100px; } 
    } 

.hi2 { 
    width: 500px; 
    height: 100px; 
    background-image: url("spritesTWO.png"); 
    animation: hi2-play 2s steps(5) infinite; 
    } 
    @keyframes hi2-play { 
      from { background-position: 0px; } 
      to { background-position: -100px; } 
    }

來源

2014-10-29 22:56:36

我不得不前綴無論是「動畫」的簡寫性能以及在@keyframes聲明，以獲得動畫工作，但是這似乎即使使用兩個相同的@keyframe聲明，也可以正常工作（在Chrome中）。我建議您刪除或重命名其中的一個，因爲您不需要兩個，但我懷疑您的問題更多地與您應用類名稱的方式有關 - 您的某個文件的樣式很可能不會應用到元素正確。嘗試將所有樣式放在一個文件中，首先在那裏工作，然後如果您願意，可以將它們分開。

來源

2014-10-29 23:40:06

如何在多個CSS動畫之間切換？

回答

相關問題