无法停止动画循环答案

【问题标题】：Can't stop animation fro cycling无法停止动画循环
【发布时间】：2018-02-12 00:35:18
【问题描述】：

我连续三张图片。我想放大鼠标悬停的那个，直到鼠标移开为止。这种作品在我的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>

【问题讨论】：

标签： css animation hover

【解决方案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>

【讨论】：