CSS background zoom animation jumps on mouse out - css

Question

I have added a keyframe animation to slowly zoom the background image in and it works perfectly, however when I move mouse out the animation jumps back to the original state instead of zooming out.
#startup.hover:before {
opacity:1;
-webkit-animation: animatedBackground 5s ease-in-out 1;
-moz-animation: animatedBackground 5s ease-in-out 1;
animation: animatedBackground 5s ease-in-out 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes animatedBackground {
0% {
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
100% {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
}
Am I missing something here?

Answer 1

first of all, is .hover a class you are adding or were you meant to use :hover? Just pointing this out. Assuming this is a class, you should add the transitions animation on the id.
#startup:before {
-webkit-transition: all 5s ease-in-out;
-moz-transition: all 5s ease-in-out;
-o-transition: all 5s ease-in-out;
transition: all 5s ease-in-out;
}
..this is why it's breaking when you are hovering out. There's no transition animation without the class!

Answer 2

You dont need such an advanced tool as a keyframes to make this effect.
It is easily achivable with transitions, here is an example.
https://jsfiddle.net/vqL3stjz/
.animable{
width: 100px;
height: 100px;
background-color: #000;
transition: all 500ms;
}
.animable:hover{
transform: scale(1.3, 1.3);
transition: all 500ms;
}
And if you need to make it with keyframes, then i suggest just applying reverse animation to unhovered element.
However, you will need to use some javascript then, to prevent side effect like animation running on the element right after it is loaded etc.
TL;DR Better use tranistions, unless you really need to use keyframes.