Question

在这里，我有许多具有不同动画帧和时间的精灵。

我想在同一个地方使用那些不同的风格。

我试图在更改类

的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时，动画会被破坏......

2 个答案:

答案 0 :(得分：3)

答案 1 :(得分：0)

Answer 1

我认为问题在于你使用相同的关键帧动画名称。根据{{3}}，

如果给定名称存在多个关键帧集，则为最后一个使用了。

尝试给他们提供唯一的名称，例如：

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

Answer 2

我必须在＆＃34;动画＆＃34;之前加上前缀简写属性以及@keyframes声明，以使动画生效，但即使使用两个相同的@keyframe声明，这似乎也能正常工作（在Chrome中）。我建议删除或重命名其中一个，因为你不需要两个，但我怀疑你的问题更多地与你应用类名的方式有关 - 你的一个文件的样式很可能没有正确地应用于元素。尝试将所有样式放在一个文件中，首先让它在那里工作，然后根据需要将它们分开。

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

2 个答案: