CSS3动画后隐藏div [英] Hide div after CSS3 Animation

问题描述

想知道如何在一组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）;不透明度：1; } 
 100％{-webkit-transform：scale（3）; opacity：0; display：none; } 
} 
 
  

这里是jsfiddle示例， p>

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

解决方案

任何想法如何永久隐藏盒子， / div>

不幸的是没有最好的解决方案，只使用CSS3。动画始终返回其默认值（

但你可以尝试使用 -webkit-animation -fill-mode 属性。

例如：

 code> #box：hover {
 -webkit-animation：scaleme 1s; 
 -webkit-animation-fill-mode：forward; 
} 
  

它至少不会立即返回一个框到 ：block; 。

使用JavaScript可以使用 webkitAnimationEnd

例如：

  var myBox = document.getElementById '框'）; 
 myBox.addEventListener（'webkitAnimationEnd'，function（event）{myBox.style.display ='none';}，false）; 
  

示例 on jsFiddle

Would like to know how to hide an div after a set of css3 animation. Here's my code:

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

Here's the jsfiddle sample for better illustration:

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

Any idea how to do hide the box permanently, best without javascript?

解决方案

Unfortunately there is no best solution using only CSS3. Animations always return to theirs default values (see at Safari Developer Library).

But you can try to play with -webkit-animation-fill-mode property.

For example:

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

It's at least not immediately return a box to display:block; state.

Using JavaScript you can do this by using webkitAnimationEnd event.

For example:

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

Example on jsFiddle

这篇关于CSS3动画后隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！