Question

我连续三张图片。我想放大鼠标移动的那一个，直到鼠标移开它。这种作用在我的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>

Answer 1

您的关键帧设置为25%表示您的元素将缩放到动画的1/4，然后不会缩放到最后。如果您只是想要平滑放大并且全部，请使用100%（我建议，减少持续时间！）。

我更新了您的fiddle。奇怪的图像样式是我们可以看到你的图像。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

您是否有使用动画方法而不是转换的特定原因？

由于所需的行为是在两个动画状态之间切换，因此过渡是一种更容易接近它的方法。

Using your example code：

＆＃13;

.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);   
}

＆＃13;

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

＆＃13;

无法停止骑自行车的动画

2 个答案: