CSS Анимация при не зависании ov

Question

Я пытаюсь сделать свой логотип растущим, когда навешивается, но затем вернется к исходному размеру, когда мышь будет удалена из логотипа. До сих пор логотип растет, когда мышь над ним, но когда вы удаляете мышь, он просто возвращается к исходному размеру, а не постепенно уменьшается с тем же эффектом.

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

Вы должны использовать transition вместо animation. Вот обновленная версия кода: 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); 
} 

Answer 2

Вместо использования animation атрибута следует использовать transition один. Я использовал это на своем собственном сайте в последнее время, и это работает для меня.

Следующий код записывается в предположении, что «#HeaderLogo» является логотип, вы говорили о:

#HeaderLogo { 
margin-top: 5px; 
margin-left: 28px; 
height: 85px; 
width: 86px; 
position: absolute; 
transition: width 1s; 
-webkit-transition: width 1s; 
transition: height 1s; 
-webkit-transition: height 1s; 
} 

#HeaderLogo:hover { 
height: // add new height here 
width: // add new width here 
transition: width 1s; 
-webkit-transition: width 1s; 
transition: height 1s; 
-webkit-transition: height 1s; 
}