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;添加到框类。你只定义了一个动画，它也需要持久属性。

这是jsfiddle。

Bonus：现在这也会在非webkit浏览器中隐藏你的对象。

使用jQuery帮助css3动画

1 个答案: