当鼠标悬停时，如何使图像在徽标文本上反弹？

Question

我正在尝试创建类似this的内容，当鼠标悬停在徽标图片上时，徽标图片会弹出我的徽标文字。我可以让文字淡出，但我似乎无法让标识在标题部分反弹。

＆＃13;

＆＃13;

#logo-bunny {
  background: url(../images/logo-bunny.png);
  position: absolute;
  top: 84px;
}

.RI-logo {
  display: block;
  position: relative;
  margin: 0 auto;
  top: 0;
  overflow: hidden;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.RI-logo:hover {
  transition: 0.25s;
  -o-transition: 0.25s;
  -ms-transition: 0.25s;
  -moz-transition: 0.25s;
  -webkit-transition: 0.25s;
  opacity: 0;
}
.RI-logo:hover ~ #logo-bunny {
  top: -20px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<a class="navbar-brand RI-logo" href="/">Resonance Inn
  <div id="logo-bunny">
  </div>
</a>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试使用css animation

#logo-bunny {
  background: url(http://lorempixel.com/50/50/animals);
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50px;
  opacity:0;
}

.RI-logo {
  height:100px;
  display: block;
  position: relative;
  margin: 0 auto;
  top: 50px;
  /*overflow: hidden;*/
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.RI-logo:hover {
  transition: 0.25s;
  -o-transition: 0.25s;
  -ms-transition: 0.25s;
  -moz-transition: 0.25s;
  -webkit-transition: 0.25s;
  color:transparent;
}

.RI-logo:hover > #logo-bunny {
  animation: popup 1500ms ease-in-out 0s both;
  -moz-animation: popup 1500ms ease-in-out 0s both;
  -ms-animation: popup 1500ms ease-in-out 0s both;
  -o-animation: popup 1500ms ease-in-out 0s both;
  -webkit-animation: popup 1500ms ease-in-out 0s both;
}

@keyframes popup {
  0% {
    top:50px;
    opacity:0;
  }
  50% {
    top:-45px;
  }
  100% {
    top:-10px;
    opacity:1;
  }
}

@-moz-keyframes popup {
  0% {
    top:50px;
    opacity:0;
  }
  50% {
    top:-45px;
  }
  100% {
    top:-10px;
    opacity:1;
  }
}

@-o-keyframes popup {
  0% {
    top:50px;
    opacity:0;
  }
  50% {
    top:-45px;
  }
  100% {
    top:-10px;
    opacity:1;
  }
}

@-webkit-keyframes popup {
  0% {
    top:50px;
    opacity:0;
  }
  50% {
    top:-45px;
  }
  100% {
    top:-10px;
    opacity:1;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<a class="navbar-brand RI-logo" href="/">Resonance Inn
  <div id="logo-bunny">
  </div>
</a>