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 に答える