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

如果您希望它在页面加载时更改不透明度，请使用代码;在没有重新启动“mymove 1”动画的情况下悬停时调整大小。

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

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

1 个答案: