CSS Animation when not hovering ov - html

Question

I'm trying to make my logo grow when hovered over, but then revert back to the original size when the mouse is removed from the logo.
So far, the logo grows when the mouse is over it, but when you remove the mouse it just jumps back to the original size rather than shrinking gradually with the same effect.
http://jsfiddle.net/raahitsme/Fv577/
CSS:
body {
margin: 0;
padding: 0;
}
#font-face { font-family: Danube; src: url('../DANUBE__.TTF'); }
#font-face { font-family: Danube; font-weight: bold; src: url('../DANUB__.TTF');}
html, body, #background { height: 100%; }
body > #background { height: auto; min-height: 100%; }
#background
{
left: 0px;
top: 0px;
position: relative;
background-color: #303030;
padding-top: -51px;
}
#HeaderGrey
{
background-color: #676767;
height: 94px;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-top: 0px;
position: relative;
}
#HeaderShaderTop
{
background-color: #0e453d;
height: 2px;
width: 100%;
position: relative;
}
#HeaderShaderBottom
{
background-color: #009d89;
height: 2px;
width: 100%;
position: relative;
}
#HeaderLogo{
margin-top: 5px;
margin-left: 28px;
height: 85px;
width: 86px;
position: absolute;
-webkit-animation-name: pulse1;
animation-name: pulse1;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#Title{
font-family: Danube;
font-size: 50px;
color: #c6c6c6;
text-align: right;
float: right;
margin-right: 16px;
margin-top: 7px;
padding-top: 0;
}
#footer{
background-color: #1f1f1f;
height: 51px;
width: 100%;
clear: both;
position: relative;
z-index: 10;
margin-top: -51px;
}
#-webkit-keyframes pulse0 {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes pulse0 {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
.pulse0 {
-webkit-animation-name: pulse2;
animation-name: pulse2;
}
#-webkit-keyframes pulse2 {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
#keyframes pulse2 {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
}
.pulse2 {
-webkit-animation-name: pulse2;
animation-name: pulse2;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#HeaderLogo:hover{
-webkit-animation-name: pulse2;
animation-name: pulse2;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

Answer 1

You should use transition instead of animation. Here is an updated version of your code: http://jsfiddle.net/maximgladkov/k8kX4/1/
#HeaderLogo{
-webkit-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
-webkit-transform: scale(1.0);
-ms-transform: scale(1.0);
transform: scale(1.0);
}
#HeaderLogo:hover{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}