无法停止动画循环

Posted 2023-03-06

【中文标题】无法停止动画循环

【英文标题】：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>

【参考方案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>