Gire la animación CSS hacia atrás

En mi pequeña página html de prueba, tengo 4 elementos. Estos elementos reproducen una animación CSS cuando se pasa el cursor, pero me gustaría que la animación se revierte cuando el usuario deja de pasar sobre ellos.

-webkit-animation-direction:alternate; 

no funcionó Mi código actual es el siguiente:

  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; }   

home

home

clients

about

¡Toda ayuda muy apreciada!

Usa el reverse para hacer que la animación vaya “hacia atrás”:

 -webkit-animation-direction:reverse; 

Aquí hay un buen tutorial detallado sobre fotogtwigs clave mediante trucos de CSS si desea obtener más información sobre las opciones disponibles para usted.