0

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

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

看来我错过了一些东西......如果有人可以帮助我，我会很高兴。

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

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'
}
4

1 回答 1

0

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

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

    .stop { -webkit-animation: whateverName 4s 1; /* applies to EVERY running animation */ }

  2. 然后：通过转换将边框和背景变成想要的值：

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

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

于 2013-07-07T04:52:48.883 回答