已添加類但動畫元素屬性未更改

元素是無限背景顏色更改（漸變）。當我再補充一點應該是一類： - 暫停動畫 - 改變邊界 - 更改背景顏色已添加類但動畫元素屬性未更改

暫停是好的，新的邊界是確定的，但背景顏色停留在瞬間達到了一個動畫暫停。

看來我失去了一些東西......如果有人能幫助我，我會很高興。

如果有用的話，現在的問題是短版：

請手下留情，我邊幹邊學（當然讀...）

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

來源

2013-07-06 iwonder

解決它擺弄（張貼之前，我嘗試了其他方式，不起作用）：

相反，我第一次變成動畫只有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/

來源

2013-07-07 04:52:48 iwonder

已添加類但動畫元素屬性未更改

回答

相關問題