javascript - 如何在多个CSS动画之间切换？

Question

这里我有许多具有不同动画帧和时间的 Sprite 。

我想在同一个地方使用这些不同的样式。

我尝试在更改类的 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>

js

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

它改变了类，但是在包含多个 CSS 时，动画被破坏了......

Answer 1

我认为问题在于您使用了相同的关键帧动画名称。根据MDN ,

If multiple keyframe sets exist for a given name, the last one encountered is used.

尝试给他们起独特的名字，例如:

.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; }
   }