Css Can'；不要停止骑自行车

我一行有三张图片。我想放大鼠标在上面的那个，直到鼠标离开它。这在我的作品中是可行的，但是，正如你所看到的，动画在放大后并没有停止。关于这个问题的其他线程说设置迭代计数和转发选项，我已经完成了。我能找到的唯一其他解决方案是使用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>

#set2{左边距：40px；显示：内联块}
#设定2：悬停{
-webkit动画：放大5s；
动画：放大5s；
动画填充模式：正向；
动画迭代次数：1；
}
@-webkit关键帧放大{
25% {
-webkit转换：比例（1.5）；
转换：比例（1.5）；
}
}

将关键帧设置为

25%

意味着您的元素将在动画中缩放1/4，然后在动画结束时不缩放。如果您只想平滑地放大，仅此而已，请使用

100%

（我建议缩短持续时间！）

我更新了你的密码。奇怪的图像样式是为了让我们可以看到你的图像

#set2{左边距：40px；显示：内联块}
#set2:悬停{
-webkit动画：放大2s；
动画：向前放大2S1；
}
@-webkit关键帧放大{
100% {
-webkit转换：比例（1.5）；
转换：比例（1.5）；
}
}
img{
最小高度：30px；
最小宽度：30px；
边框：3倍纯红；
}

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

由于所需的行为是在两个动画状态之间切换，因此转换可能更容易实现

:

.nav{margin:0；padding top:5px；溢出：hidden}
.nav项目{边框：1px纯黑}
.nav项{左边距：0px；显示：内联块；溢出：隐藏；}
.nav项：悬停img{
盒影：0px 0px 150px#000000；
z指数：2；
-webkit过渡：所有500毫秒的缓进；
-webkit转换：规模（2.1）；
-ms转换：所有500毫秒的时间都很容易进入；
-ms变换：比例（2.1）；
-moz转换：所有500毫秒的缓进；
-moz变换：比例（2.1）；
过渡：所有500毫秒的时间都很容易进入；
转换：比例（2.1）；
}
.导航项目img{
-webkit过渡：所有200毫秒的易用性；
-webkit转换：规模（1）；
-ms转换：所有200毫秒的速度都很慢；
-ms变换：尺度（1）；
-moz转换：所有200毫秒的速度都很慢；
-moz变换：比例（1）；
过渡：所有200毫秒的速度都很慢；
变换：比例（1）；
}