添加了类，但动画元素属性未更改答案

【问题标题】：Class is added but animated element property is not changed添加了类，但动画元素属性未更改
【发布时间】：2013-07-07 19:19:39
【问题描述】：

一个元素是无限的背景颜色变化（渐变）。当我添加一个应该的类时： - 暂停动画 - 更改边框 - 改变背景颜色

暂停没问题，新边框没问题，但背景颜色保持在动画暂停时达到的颜色。

我好像遗漏了什么……如果有人可以帮助我，我会很高兴。

如果有用，这里是问题的简短版本：

http://jsfiddle.net/iwonder/gxbWf/

请原谅，我边做边学（当然还有阅读......）

<div id="container"><div id="spot" class="grad2 looping2"></div>
    <div id="spot" class="grad2"></div>
</div>
<input id="test" type="button" value="click" onclick="stop()"/>


.grad2 {
    float:left;
    width:25px;
    height:25px;
    border-radius:25px;
    background: yellow;
    border:2px solid purple;}

.looping2{
    -webkit-animation-duration:2s;
    -webkit-animation-name: twostates2;
    -webkit-animation-iteration-count: infinite;  
    -webkit-animation-direction: alternate;
}

.purple {
    -webkit-animation-play-state:paused;
    background:purple;
    border:2px solid green;

}
@-webkit-keyframes twostates2{    
  0%    {background: yellow}
  20%   {background: red}
  40% {background: yellow}
  60%   {background: red}
  81% {background: yellow}
  84%   {background: red}
  87% {background: yellow}
  90% {background: red}
  93% {background: yellow}
  97%   {background: red}
  100% {background: yellow}
}



function stop() {

document.getElementById('spot').className += ' purple'
}

【问题讨论】：

标签： javascript css background-color css-animations

【解决方案1】：

通过摆弄解决了（发帖之前，我尝试了其他不起作用的方法）：

相反，我第一次将动画转为仅 1 次迭代：

.stop { -webkit-animation: whateverName 4s 1; /* applies to EVERY running animation */ }
然后：将边框和背景转换为所需的值：

.purpletrans { background:purple; border:2px solid green; transition: background 1s linear, border 5s ease;}

也许这是一个明显的解决方案，但它不适合我。任何其他答案仍将不胜感激。如果有的话...
感谢阅读
用新的工作方式更新了 jsfiddle，如果它可以帮助新手...http://jsfiddle.net/iwonder/gxbWf/

【讨论】：