无法停止动画循环 [英] Can't stop animation fro cycling

问题描述

我连续有三张图片。我想放大鼠标移动到鼠标移开的位置。这种工作在我的 jsfiddle 中，但是，正如您所看到的，动画并不会在扩大。在这个问题上的其他线程说设置迭代计数和转发选项，我已经完成。我唯一能找到的其他解决方案是使用javascript来控制它。有没有办法只用css来做到这一点？这是我的代码：

 < style> 
 
＃set2 {margin-left：40px; display：inline-block} 
＃set2：hover {
 -webkit-animation：放大5s; 
动画：放大5s; 
 animation-fill-mode：forwards; 
 animation-iteration-count：1; 
} 
 @ -webkit-keyframes放大{
 
 25％{
 -webkit-transform：scale（1.5）; 
 transform：scale（1.5）; 
} 
} 
 
< / style> 
 
< div class =banner_set> 
< ul class =nav> 
< li id =set2class =nav-items>< a href =example.com>< img src =example1.jpg>< / a> < /锂> 
< li id =set2class =nav-items>< a href =example.com>< img src =example2.jpg>< / a> < /锂> 
< li id =set2class =nav-items>< a href =example.com>< img src =example3.jpg>< / a> < /锂> 
< / ul> 
< / div> 
  

解决方案

是否有您使用动画的特定原因而不是过渡？

因为期望的行为是在两个动画状态之间切换，所以转换可能是一种更简单的方法。

使用您的示例代码：

.nav {margin：0; padding-top：5px; overflow：hidden} .nav-items {border：1px solid black} .nav-items {margin-left：0px;显示：内联块; overflow：hidden;}。nav-items：hover img {box-shadow：0px 0px 150px＃000000; z-index：2; -webkit转换：全部500ms易用; -webkit-transform：scale（2.1）; -ms-transition：全部500ms缓解; -ms-transform：scale（2.1）; -moz-transition：全部500ms缓解; -moz-transform：scale（2.1）;过渡：全部500ms缓解;变换：尺度（2.1）; } .nav-items img {-webkit-transition：全部200ms缓入; -webkit-transform：scale（1）; -ms-transition：全部200ms缓入; -ms-transform：scale（1）; -moz-transition：全部200ms缓和; -moz-transform：scale（1）;过渡：全部200ms缓解;变换：缩放（1）; }

< div class =banner_set> < ul class =nav> < li-id =0class =nav-items small_0>< a href =example.com>< img src =http://placehold.it/200x200>< / A>< /锂> < li id =1class =nav-items small_1>< a href =example.com>< img src =http://placehold.it/200x200>< / A>< /锂> < li id =2class =nav-items small_2>< a href =example.com>< img src =http://placehold.it/200x200>< / A>< /锂> < / UL> < / DIV>

I have three images in a row. I want to enlarge the one that the mouse is over until the mouse is moved off of it. This sort of works in my jsfiddle but, as you can see, the animation doesn't stop after enlarging. The other threads on this problem say to set the iteration count and forwards options, which I've done. The only other solution I could find was to use javascript to control it. Is there a way to do this with just css? Here's my code:

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

解决方案

Is there a specific reason you're using the animation approach rather than a transition?

Since the desired behavior is to toggle between two animated states, perhaps the transition is an easier way to approach it.

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>
 

这篇关于无法停止动画循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！