0

ここにこの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」アニメーションが再び開始されます。なぜこれが起こっているのか理解できません.助けてください.jsFiddleで動作するコードを確認することもできます .

4

1 に答える 1

0

「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>
于 2013-10-05T13:30:35.373 に答える