關於懸停停止動畫的純CSS

Question

我需要停止對以下Codepen項目的懸停動畫。

不過，我覺得，加入

.photo:hover{ 
animation-play-state:paused; 
-webkit-animation-play-state:paused; 
} 

可能是足夠的，但它只而對於其他三個動畫繼續在後臺運行的可視圖像。

我該如何解決？

感謝您閱讀

Answer 1

您應該使用:hover僞類上，而不是.container，然後暫停所有的.photo

body { 
 
    background: #000; 
 
} 
 

 
.container { 
 
    margin: 50px auto; 
 
    width: 500px; 
 
    height: 300px; 
 
    overflow: hidden; 
 
    border: 10px solid; 
 
    border-top-color: #856036; 
 
    border-left-color: #5d4426; 
 
    border-bottom-color: #856036; 
 
    border-right-color: #5d4426; 
 
    position: relative; 
 
} 
 

 
.photo { 
 
    position: absolute; 
 
    animation: round 16s infinite; 
 
    opacity: 0; 
 
} 
 

 
@keyframes round { 
 
    25% { 
 
    opacity: 1; 
 
    } 
 
    40% { 
 
    opacity: 0; 
 
    } 
 
} 
 
img:nth-child(1) { 
 
    animation-delay: 12s; 
 
} 
 

 
img:nth-child(2) { 
 
    animation-delay: 8s; 
 
} 
 

 
img:nth-child(3) { 
 
    animation-delay: 4s; 
 
} 
 

 
img:nth-child(4) { 
 
    animation-delay: 0s; 
 
} 
 
.container:hover .photo { 
 
animation-play-state:paused; 
 
-webkit-animation-play-state:paused; 
 
}

<div class="container"> 
 
    <img class='photo' src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" /> 
 
    <img class='photo' src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" /> 
 
    <img class='photo' src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" /> 
 
    <img class='photo' src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" /> 
 

 
</div>