Html 不悬停时的CSS动画

我试图使我的徽标在鼠标悬停时变大，但当鼠标从徽标上移开时，会恢复到原来的大小。 到目前为止，当鼠标放在徽标上时，徽标会变大，但当您移除鼠标时，徽标会跳回原始大小，而不是以相同的效果逐渐缩小

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

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