如何在多个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动画之间切换？

回答

相关问题