CSS3动画后隐藏div

Question

想知道如何在一组CSS3动画后隐藏一个div。这是我的代码：

#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;
  }
}

<div id='box'>
  hover me
</div>

以下是jsfiddle样例，以便更好地说明:

http://jsfiddle.net/mochatony/Pu5Jf/18/

有没有办法永久隐藏这个框，最好不用JavaScript？

- TonyTakeshi

Answer 1

很遗憾，仅使用CSS3没有最佳解决方案。动画总是返回到它们的默认值（请参见Safari开发人员库）。

但是你可以尝试使用-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上的示例

- antyrat

---

我正在使用Chrome浏览器，即使使用了-webkit-animation-fill-mode: forwards;，没有JS代码片段，CSS3本身也无法将display更改为none。 - qbolec

Answer 2

将您的动画定义更改为：

-webkit-animation:scaleme 1s forwards;

这是关于动画填充模式的一个参数。'forwards'的值告诉动画在最后一次迭代结束后应用其最后执行关键帧中定义的属性值，直到删除动画样式为止。

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

- Ian Devlin

Answer 3

由于CSS动画的元素会以其原始CSS状态结束，因此请通过将其缩放为零或删除其不透明度来隐藏原始状态：

div.container {
transform: scale(0);
-webkit-transform: scale(0);
}

或者

div.container {
opacity: 0;
}

一旦动画完成，div 将返回到其原始的 CSS 样式，即隐藏状态。

- NicB

Answer 4

这个问题可以（在某种程度上）不用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; }
}

在这个特定的例子中，不需要使用1000毫秒。10毫秒对于悬停效果应该足够了。

然而，也可以跳过动画，改用基本的过渡效果。

#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;
}

我分叉了你的小工具并进行了修改，添加了两个用于比较的: http://jsfiddle.net/madr/Ru8wu/3/

(我还添加了 -moz-，因为没有理由不这样做。-o- 或者 -ms- 也可能会有兴趣）。

- madr