How to prevent css keyframe animation to run on page load?

Answer 1

Is there a way to do this pure CSS ?

Yes, absolutely : See the fork http://jsfiddle.net/5r32Lsme/2/ There is really no need for JS.

and I'd prefer it to run only after a hover event.

So you need to tell CSS what happens when it is NOT a hover event as well - in your example :

#container:not(:hover) #content {
  visibility: hidden;
  transition: visibility 0.01s 1s;
}

But there are two things to note:

1) The transition delay above should match your animation duration

2) You can't use the property which you use to hide the animation onLoad in the animation. If you do need visibility in the animation, hide the animation initially like e.g.

#container:not(:hover) #content {
  top: -8000px;
  transition: top 0.01s 1s;
}    

A sidenote:

It is recommended to put native CSS properties after prefixed ones, so it should be

-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;

and now there is a native transform

-webkit-transform: translateY(0);
transform: translateY(0);