无法停止骑自行车动画

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

来源

2017-09-03 user3052443

是否有您所使用的动画方法，而不是转变的具体原因是什么？

由于期望的行为是在两个动画状态之间切换，所以转换可能更容易。

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>

来源

2017-09-04 16:32:18 slothluvchunk

你的关键帧定在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>

来源

2017-09-03 17:05:06 arbuthnott

无法停止骑自行车动画

回答

相关问题