Question

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

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

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?

Answer 1

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