想知道如何在一套
css3动画之后隐藏div.这是我的代码：
HTML
<div id='Box'>
hover me
</div>
CSS3
#Box{
position:absolute;
top:200px;
left:200px;
width:200px;
height:150px;
background-color:red;
}
#Box:hover{
-webkit-animation:scaleme 1s;
}
@-webkit-keyframes scaleme {
0% { -webkit-transform: scale(1); opacity: 1; }
100% { -webkit-transform: scale(3); opacity: 0;display:none; }
}
以下是jsfiddle示例,以便更好地说明：
http://jsfiddle.net/mochatony/Pu5Jf/18/
任何想法如何永久隐藏盒子,最好没有javascript？
解决方法
不幸的是没有使用CSS3的最佳解决方案.动画总是返回到默认值(
see at Safari Developer Library).
但是您可以尝试使用-webkit-animation-fill-mode属性来播放.
例如：
#Box:hover{
-webkit-animation:scaleme 1s;
-webkit-animation-fill-mode: forwards;
}
至少不会立即返回一个框来显示：block;州.
使用JavaScript可以通过使用webkitAnimationEnd事件来实现.
例如：
var myBox = document.getElementById('Box');
myBox.addEventListener('webkitAnimationEnd',function( event ) { myBox.style.display = 'none'; },false);
Example在jsfiddle