Turn animation CSS backwards - html

Question

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 over them.
-webkit-animation-direction:alternate;
didn't work. My current code is as follows:
<style>
div:hover{
-webkit-animation: animationFrames ease 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 0% 0%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-webkit-animation-direction:alternate;
}
#-webkit-keyframes animationFrames {
0% {
opacity:1;
-webkit-transform: rotate(0deg) scaleX(1) scaleY(1) ;
}
20% {
-webkit-transform: rotate(60deg) ;
}
40% {
-webkit-transform: rotate(40deg) ;
}
60% {
-webkit-transform: rotate(54deg) ;
}
80% {
-webkit-transform: rotate(42deg) ;
}
100% {
opacity:1;
-webkit-transform: rotate(46deg) scaleX(1) scaleY(1) ;
}
}
.testje1
{
background: black;
width:48px;
height:20px;
position:absolute;
left:200px;
top:200px;
}
.testje2
{
background: black;
width:48px;
height:20px;
position:absolute;
left:300px;
top:200px;
}
.testje3
{
background: black;
width:48px;
height:20px;
position:absolute;
left:400px;
top:200px;
}
.testje4
{
background: black;
width:48px;
height:20px;
position:absolute;
left:500px;
top:200px;
}
p
{
position:absolute;
top:-14;
left:2;
color:white;
}
</style>
<a href="http://www.redrumbureau.com" target="_blank" >
<div class="testje1"><p>home</p></div>
</a>
<a href="http://www.redrumbureau.com/work" target="_blank">
<div class="testje2"><p>home</p></div>
</a>
<a href="http://www.redrumbureau.com/clients" target="_blank">
<div class="testje3"><p>clients</p></div>
</a>
<a href="http://www.redrumbureau.com/about" target="_blank">
<div class="testje4"><p>about</p></div>
</a>
All help greatly appreciated!

Answer 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.