幫助使用jQuery的CSS3動畫

Question

我需要一些幫助，我正在嘗試將css3動畫與jQuery結合使用，以創建更多流暢的動畫，這里的問題是動畫效果很好，但是當動畫完成時，該元素會恢復為原始狀態大小，我如何使其動畫到0px寬度並保持該大小。 我的代碼如下所示：

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

Answer 1

添加width:0px; 到盒子課。 您只定義了一個動畫，它也需要persistent屬性。

這是jsfiddle 。

獎勵：現在，這也將對象隱藏在非Webkit瀏覽器中。

幫助使用jQuery的CSS3動畫

問題描述

1 個解決方案

解決方案1
1 已采納 2011-04-06 23:35:42

幫助使用jQuery的CSS3動畫

問題描述

1 個解決方案

解決方案1 1 已采納 2011-04-06 23:35:42

解決方案1
1 已采納 2011-04-06 23:35:42