为什么悬停动画无法正常工作

Question

我们这里有这个 h1

<h1 class="in">hello</h1>

为此的 CSS 是

    .in{
-webkit-animation:mymove1 3s 1;
   }
.in:hover {
 -webkit-animation:nextT 3s 1;
        -webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes "mymove1"
{
0% {opacity:0;
      margin-left:0px;}
100% {opacity:1;
    margin-left: 8px;}
}
@-webkit-keyframes "nextT"
{
0% {
     -webkit-transform:scale(1);
    }
100% {
    -webkit-transform:scale(1.2);
    }
}

因此，加载动画可以正常工作，当我悬停它长大时，这就是我想要的，但是当我从 H1 中移除鼠标时，"mymove1"动画再次开始。 我不明白为什么会发生这种情况，请帮助我。您还可以检查代码js小提琴

Answer 1

如果您希望

它在页面加载时更改不透明度并在没有"mymove1"动画重新启动的情况下悬停时调整大小，则这里是代码。

    <style>
    .in{
animation:mymove1 3s 1;
transform:scale(1);
/*If You want the hover to ease in and out*/
transition:transform 1s ease-in-out 0s;
   }
.in:hover {
transform:scale(1.2);
}
@keyframes mymove1
{
0% {opacity:0;
      margin-left:0px;}
100% {opacity:1;
    margin-left: 8px;}
}
</style>