サイクリングのアニメーションを停止できません

Question

3つのイメージが連続しています。私は、マウスが動かされるまでマウスが上がっているものを拡大したい。この種の作品は私のjsfiddleにありますが、ご覧のように、アニメーションは拡大しても止まりません。この問題の他のスレッドは、繰り返し回数と転送オプションを設定すると言っています。私が見つけることができる唯一の他の解決策は、javascriptを使ってそれを制御することでした。ちょうどCSSでこれを行う方法はありますか？ここに私のコードだ：25%に設定

<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> 

Answer 1

アニメーションのアプローチを使用している具体的な理由ではなく、移行はありますか？

2つのアニメーション化された状態を切り替えるのが目的の動作であるため、おそらく遷移がより簡単な方法になります。

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> 
 

Answer 2

あなたのキーフレームは、あなたの要素は、その後、最後にスケーリングしない、アニメーションを通じて道の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>