不悬停时的CSS动画

Posted 2023-03-06

【中文标题】不悬停时的CSS动画

【英文标题】：CSS Animation when not hovering ov

【发布时间】：2014-03-22 03:55:54

【问题描述】：

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

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;

【参考方案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);