CSS3 Animation to hoverstate and back - css

Question

I need an element that initially has no animation, then animates to a different state on hover (one time, no loop) and after the hover is gone it should animate back to its original state.
Basically just like you would do it with a :hover style and a transition.
Is there a way to achieve that with a CSS3 animation?
This is my current usecase: http://jsfiddle.net/yjD73/11/
On hover an element fades from opacity: 0 to opacity: 1 and back.
This is what i think is not possible with transitions.
EDIT: As requested here the exact code from jsfiddle
a div with four images
<div class="zoombox">
<img src="http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=4&center=51.561998,-1.605100">
<img src="http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=7&center=51.561998,-1.605100">
<img src="http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=12&center=51.561998,-1.605100">
<img src="http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=16&center=51.562606,-1.605100">
</div>
images stacked onto each other and simple css animations on hover
.zoombox {
position: relative;
margin: 50px;
float: left;
}
/* initial state */
.zoombox img:not(:first-child) {
position: absolute;
top: 0;
opacity: 0;
}
/* On hover in */
.zoombox:hover img:nth-child(1) {
-webkit-animation: first-in 400ms 0ms 1 normal ease-in both;
}
.zoombox:hover img:nth-child(2) {
-webkit-animation: middle-in 1600ms 0ms 1 linear both;
}
.zoombox:hover img:nth-child(3) {
-webkit-animation: middle-in 1600ms 1200ms 1 linear both;
}
.zoombox:hover img:nth-child(4) {
-webkit-animation: last-in 400ms 2400ms 1 linear both;
}
#-webkit-keyframes first-in {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(1.5);
opacity: 0;
}
}
#-webkit-keyframes middle-in {
0% {
-webkit-transform: scale(0.5);
opacity: 0;
}
25%, 75% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(1.5);
opacity: 0;
}
}
#-webkit-keyframes last-in {
0% {
-webkit-transform: scale(0.5);
opacity: 0;
}
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}

Answer 1

Conic, I have created a JSFiddle that replicates most of what you want with css3 animations.
Here it is.
The code that makes this all possible in CSS is:
#-webkit-keyframes changeImage {
0% {background: url("http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=4&center=51.561998,-1.605100");}
33% {background: url("http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=7&center=51.561998,-1.605100");}
67% {background: url("http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=12&center=51.561998,-1.605100");}
100% {background: url("http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=16&center=51.562606,-1.605100");}
}
Right now the jsfiddle is having the image run through the animation on hover and return to the original image. Let me know if you need any over things to happen and by the way, this won't work on any touch devices as a result of a lack of hover state possibilities.