Question

我正试图让我的徽标在悬停时生长，但是当鼠标从徽标中移除时，它会恢复到原始大小。到目前为止，当鼠标悬停在它上面时，徽标会增长，但是当你移除鼠标时，它会跳回到原始大小，而不是逐渐缩小，效果相同。

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

不动画时的CSS动画

2 个答案: