想知道如何在一套
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
