停止鼠標懸停後的動畫對象

Question

我有一個單一的對象（實際上是一個菜單），它有一個彈跳動畫，當我mousehover它有一個子菜單向上滑動。我想要做的是，當我將鼠標懸停在它上面時，我需要停止彈起的對象。當我將鼠標懸停在對象上時，只需停止對象的反彈動畫即可。我怎樣才能做到這一點 ？

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>