Hide div after CSS3 Animation

Change your animation definition to:

-webkit-animation:scaleme 1s forwards;

This is a value for the animation fill mode. A value of 'forwards' tells the animation to apply the property values defined in its last executing keyframe after the final iteration of the animation, until the animation style is removed.

Of course in your example the animation style will be removed when the hover is removed. At the moment I can see the need for a small piece of JavaScript to add a class which triggers the animation. Since the class would never be removed (until the page is reloaded) the div would stay hidden.

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