css - 为什么这个悬停动画不能正常工作？

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

所以onload动画可以正常工作，当我悬停时它会长大，这就是我想要的，但是当我从h1上移开鼠标时，“mymove1”动画又开始了。我不明白为什么会发生这种情况，请帮帮我。您还可以检查在 jsFiddle上工作的代码

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>