Question

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

暂停即可，新边框正常，但背景颜色保持在动画暂停时达到的颜色。

似乎我错过了一些东西......如果有人能帮助我，我会很高兴。

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

请，请务必，我从实践中学习（并阅读课程......）

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

Answer 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/

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

1 个答案: