我連續拍攝三張圖像。我想放大鼠標移動到鼠標移開的位置。這種作品在我的jsfiddle中,但正如你所看到的,放大後動畫不會停止。在這個問題上的其他線程說設置迭代計數和轉發選項,我已經完成。我唯一能找到的其他解決方案是使用javascript來控制它。有沒有辦法只用css來做到這一點?這裏是我的代碼:無法停止騎自行車動畫
<style>
#set2 {margin-left:40px; display:inline-block}
#set2:hover {
-webkit-animation: enlarge 5s;
animation: enlarge 5s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
@-webkit-keyframes enlarge {
25% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
}
</style>
<div class="banner_set">
<ul class="nav">
<li id="set2" class="nav-items"><a href="example.com"><img src="example1.jpg"></a></li>
<li id="set2" class="nav-items"><a href="example.com"><img src="example2.jpg"></a></li>
<li id="set2" class="nav-items"><a href="example.com"><img src="example3.jpg"></a></li>
</ul>
</div>