html div hide,Hide div after the CSS3 animation

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

html

hover me

​

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:

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

more