无法停止动画循环 [英] Can't stop animation fro cycling
问题描述
< 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.
.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屋!