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>