幫助css3動畫與jQuery

我需要一些幫助，我想與css3動畫結合使用jQuery爲了創建更流暢的動畫，我的問題在這裏是動畫工作正常，但當動畫是完成後，元素會恢復到原始大小，我怎樣才能讓它動畫到0px寬度並保持在這個尺寸。我的代碼如下所示：幫助css3動畫與jQuery

<style> 

.element{ 
width:210px; 
height:210px; 
background-color:#000; 
} 


    .box { 
    -webkit-animation-name: BOX; 
    -webkit-animation-duration: 0.75s; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-timing-function: ease-in; 
    } 




    @-webkit-keyframes BOX { 
    from { 
    width: 210px; 
    } 
    to { 
    width: 0px; 
    } 
    } 
</style> 

<html> 
<div class="element"></div> 

$('.element').click(function(){ 
$(this).addClass('box'); 
}); 

</html>

來源

2011-04-06 mcbeav

如果你的產品代碼看起來像這樣的代碼，你會更好的CSS過渡。 Opera，Webkit和Firefox都支持它們，它們的語法更簡單。 – Duopixel 2011-04-07 11:46:09

將width:0px;加到箱子類中。您只定義了一個動畫，它也需要持久屬性。

這是jsfiddle。

獎勵：這現在還隱藏您的對象在非webkit瀏覽器。

來源

2011-04-06 23:35:42 RSG

謝謝，作品像一個魅力，再次感謝，任何想法，如果有類似的語法mozilla？ – mcbeav 2011-04-07 15:30:17

我不確定你可以在沒有Javascript的情況下做到這一點。 – RSG 2011-04-07 16:45:38

幫助css3動畫與jQuery

回答

相關問題