Hide div after CSS3 Animation

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