2017-09-03 42 views
-1

我連續拍攝三張圖像。我想放大鼠標移動到鼠標移開的位置。這種作品在我的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> 

回答

1

是否有您所使用的動畫方法,而不是轉變的具體原因是什麼?

由於期望的行爲是在兩個動畫狀態之間切換,所以轉換可能更容易。

Using your example code

.nav {margin:0; padding-top:5px;overflow:hidden} 
 
.nav-items {border:1px solid black} 
 
.nav-items {margin-left:0px; display:inline-block; overflow: hidden;} 
 
.nav-items:hover img { 
 
    box-shadow: 0px 0px 150px #000000; 
 
    z-index: 2; 
 
    -webkit-transition: all 500ms ease-in; 
 
    -webkit-transform: scale(2.1); 
 
    -ms-transition: all 500ms ease-in; 
 
    -ms-transform: scale(2.1); 
 
    -moz-transition: all 500ms ease-in; 
 
    -moz-transform: scale(2.1); 
 
    transition: all 500ms ease-in; 
 
    transform: scale(2.1); 
 
} 
 
.nav-items img { 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(1); 
 
}
<div class="banner_set"> 
 
    
 
    <ul class="nav"> 
 
    <li id="0" class="nav-items small_0"><a href="example.com"><img src="http://placehold.it/200x200"></a></li> 
 
    <li id="1" class="nav-items small_1"><a href="example.com"><img src="http://placehold.it/200x200"></a></li> 
 
    <li id="2" class="nav-items small_2"><a href="example.com"><img src="http://placehold.it/200x200"></a></li> 
 
    </ul> 
 
    </div> 
 

2

你的關鍵幀定在25%意味着你的元素將通過動畫,然後在最後不按比例縮放的方式1/4。如果你只是想順利擴大規模,那就用100%(我建議,減少持續時間!)。

我更新了您的fiddle。奇怪的圖像樣式是我們可以看到你的圖像。

#set2 {margin-left:40px; display:inline-block} 
 
#set2:hover { 
 
    -webkit-animation: enlarge 2s; 
 
    animation: enlarge 2s 1 forwards; 
 
} 
 
@-webkit-keyframes enlarge { 
 
    100% { 
 
    -webkit-transform: scale(1.5); 
 
    transform: scale(1.5); 
 
    } 
 
    
 
} 
 

 
img { 
 
    min-height: 30px; 
 
    min-width: 30px; 
 
    border: 3px solid red; 
 
}
<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>