html动画怎么隐藏,在CSS3动画后隐藏div

var myBox = document.getElementById('box');

myBox.addEventListener('webkitAnimationEnd',function(event) { myBox.style.display = 'none'; }, false);

Example即可以(种)在不使用JavaScript来解决。由于动画使用关键帧，因此可以通过将持续时间设置为过高的值(例如1000秒)并让您在低帧结束时(例如0.1％)来请求。

通过这样做，动画永不结束，因此保持形状。

#box:hover {

-webkit-animation:scaleme 1000s;

}

@-webkit-keyframes scaleme {

0% { -webkit-transform: scale(1); opacity: 1; }

0.1%, 100% { -webkit-transform: scale(3); opacity: 0;display:none; }

}

1000s在这个特殊的例子中不是必需的。 10s应该足够用于悬停效果。

但是，也可以跳过动画并使用基本转换。

#box2:hover {

-webkit-transition: all 1s;

-moz-transition: all 1s;

-o-transition: all 1s;

transition: all 1s;

-moz-transform: scale(3);

-webkit-transform: scale(3);

opacity: 0;

}

(我还加-moz-因为没有理由不-o-或-ms-也可能会感兴趣。)。