在CSS3动画后隐藏div

Question

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

Answer 1

不幸的是,没有最好的解决方案只使用CSS3.动画始终返回其默认值(请参阅Safari Developer Library).

但你可以尝试玩-webkit-animation-fill-mode房产.

例如:

#box:hover{
  -webkit-animation:scaleme 1s;
  -webkit-animation-fill-mode: forwards;
}

它至少不会立即返回一个display:block;状态框.

使用JavaScript,您可以使用webkitAnimationEnd事件来完成此操作.

例如:

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

关于jsFiddle的示例

Answer 2

将动画定义更改为：

-webkit-animation:scaleme 1s forwards;

这是动画填充模式的值。值为'forwards'指示动画在动画的最终迭代之后应用在其最后执行的关键帧中定义的属性值，直到删除动画样式为止。

当然，在您的示例中，当悬停被移除时，动画样式也将被移除。目前，我看到需要添加一小段JavaScript来添加触发动画的类。由于永远不会删除该类（直到重新加载页面），因此div将保持隐藏状态。