Turn Animation Css Backwards

On my little testing html page, I have 4 elements. These elements play a CSS animation when hovered over, but I would like the animation to go reverse when the user stops hovering

Solution 1:

Use reverse to make the animation go "backwards":

-webkit-animation-direction:reverse;

Here's a nice detailed tutorial on keyframes by CSS tricks if you'd like to learn more about the options available to you.