html - 鼠标悬停后停止动画对象

Question

我有一个对象(实际上是一个菜单)，它有一个弹跳动画，当我将鼠标悬停在它上面时，会向上滑动一个子菜单。我想要做的是，当我将鼠标悬停在物体上时，我需要停止物体弹跳。当我将鼠标悬停在物体上时，我只需要停止在物体上弹跳动画。我该怎么做？

body{padding: 3em; }
#menu * { 
  padding:0; 
  margin: 0; 
  font: 12px georgia; 
  list-style-type:none;
}
#menu { 
  float: left;
  line-height: 10px; 
  left: 200px;
}
#menu a { 
  display: block; 
  text-decoration: none; 
  color: #3B5330;
}
#menu a:hover {
  background: #B0BD97;
}
#menu ul li ul li a:hover { 
  background: #ECF1E7; 
  padding-left:9px;
  border-left: solid 1px #000;
}
#menu ul li ul li {
  width: 140px; 
  border: none; 
  color: #B0BD97;  
  padding-top: 3px; 
  padding-bottom:3px; 
  padding-left: 3px; 
  padding-right: 3px; 
  background: #B0BD97;
  z-index:1;
}
#menu ul li ul li a { 
  font: 11px arial; 
  font-weight:normal; 
  font-variant: small-caps; 
  padding-top:3px; 
  padding-bottom:3px;
}
#menu ul li {
  float: left; 
  width: 146px; 
  font-weight: bold; 
  border-top: solid 1px #283923; 
  border-bottom: solid 1px #283923; 
  background: #979E71;
}
#menu ul li a { 
  font-weight: bold;
  padding: 15px 10px;
}
#menu li{ 
  position:relative; 
  float:left;
}
#menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul{ 
  display:none;
  list-style-type:none; 
  width: 140px;
}
#menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul { 
  display:block;
}
#menu:hover ul li:hover ul li:hover ul { 
  position: absolute;
  margin-left: 145px;
  margin-top: -22px;
  font: 10px;
}
#menu:hover ul li:hover ul { 
  position: absolute;
  margin-top: 1px;
  font: 10px;
}
#menu >ul >li:hover >ul { 
  bottom:100%;
  border-bottom: 1px solid transparent
}

@-webkit-keyframes bounce {
  0% {
    transform: scale(1,1) translate(0px, 0px);
  }

  30%{
    transform: scale(1,0.8) translate(0px, 10px); 
  }

  75%{
    transform: scale(1,1.1) translate(0px, -25px); 
  }

  100% {
    transform: scale(1,1) translate(0px, 0px);
  }
}

.bounce {
  text-align:center;
  height:20px;
  width:150px;
  padding:20px;
 -webkit-animation: bounce 3s infinite ;
}

<div id="menu" class="bounce">
  <ul>
    <li><center><a href="http://www.cafewebmaster.com">Home</a></center>
      <ul>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Disclaimer</a></li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

使用animation-play-state属性可以暂停或恢复动画

.bounce:hover {
  animation-play-state: paused;
}

body{
  padding: 3em; 
}
#menu * { 
  padding:0; 
  margin: 0; 
  font: 12px georgia; 
  list-style-type:none;
}
#menu { 
  float: left;
  line-height: 10px; 
  left: 200px;
}
#menu a { 
  display: block; 
  text-decoration: none; 
  color: #3B5330;
}
#menu a:hover {
  background: #B0BD97;
}
#menu ul li ul li a:hover { 
  background: #ECF1E7; 
  padding-left:9px;
  border-left: solid 1px #000;
}
#menu ul li ul li {
  width: 140px; 
  border: none; 
  color: #B0BD97;  
  padding-top: 3px; 
  padding-bottom:3px; 
  padding-left: 3px; 
  padding-right: 3px; 
  background: #B0BD97;
  z-index:1;
}
#menu ul li ul li a { 
  font: 11px arial; 
  font-weight:normal; 
  font-variant: small-caps; 
  padding-top:3px; 
  padding-bottom:3px;
}
#menu ul li {
  float: left; 
  width: 146px; 
  font-weight: bold; 
  border-top: solid 1px #283923; 
  border-bottom: solid 1px #283923; 
  background: #979E71;
}
#menu ul li a { 
  font-weight: bold;
  padding: 15px 10px;
}
#menu li{ 
  position:relative; 
  float:left;
}
#menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul{ 
  display:none;
  list-style-type:none; 
  width: 140px;
}
#menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul { 
  display:block;
}
#menu:hover ul li:hover ul li:hover ul { 
  position: absolute;
  margin-left: 145px;
  margin-top: -22px;
  font: 10px;
}
#menu:hover ul li:hover ul { 
  position: absolute;
  margin-top: 1px;
  font: 10px;
}
#menu >ul >li:hover >ul { 
  bottom:100%;
  border-bottom: 1px solid transparent
}

@-webkit-keyframes bounce {
  0% {
    transform: scale(1,1) translate(0px, 0px);
  }

  30%{
    transform: scale(1,0.8) translate(0px, 10px); 
  }

  75%{
    transform: scale(1,1.1) translate(0px, -25px); 
  }

  100% {
    transform: scale(1,1) translate(0px, 0px);
  }
}

.bounce {
  text-align:center;
  height:20px;
  width:150px;
  padding:20px;
 -webkit-animation: bounce 3s infinite ;
}

.bounce:hover {
  animation-play-state: paused;
}

<div id="menu" class="bounce">
  <ul>
    <li><center><a href="http://www.cafewebmaster.com">Home</a></center>
      <ul>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Disclaimer</a></li>
      </ul>
    </li>
  </ul>
</div>