0

マウスをその上に置くと移動するバナーがあり、マウスが終了すると、バナーは元の位置に戻ります。アニメーション後に現在の位置で停止させる方法を知りたいです (私はしたくありません)毎回リセットする）

これがどのように動くか：

  /*keyframe animations*/
.first:hover {
    -webkit-animation: bannermove 30s linear infinite;
       -moz-animation: bannermove 30s linear infinite;
        -ms-animation: bannermove 30s linear infinite;
         -o-animation: bannermove 30s linear infinite;
            animation: bannermove 30s linear infinite;
}

@keyframes "bannermove" {
 0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -2125px;
 }

}


@-webkit-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }

}
4

2 に答える 2

2

考慮すべき点がいくつかあります。

  • 含まれている div のような別の要素をホバーする必要がある可能性があります。要素が画面から消えたときに、要素の上にホバーし続けるのは困難です。
  • アニメーションの塗りつぶしモードを追加します。これにより、ユーザーがホバーし続ける限り、アニメーションの終了状態が持続します。

実施例

<div class="container">
    <div class="first"></div>
</div>

 .container:hover .first{
    -webkit-animation: bannermove 30s linear both;
    -moz-animation: bannermove 30s linear both;
    -ms-animation: bannermove 30s linear both;
    -o-animation: bannermove 30s linear both;
    animation: bannermove 30s linear both;
}

@keyframes bannermove {
    0% {
        margin-left: 0px;
    }
    100% {
        margin-left: -2125px;
    }
}

ユーザーがホバリングしなくなった後もアニメーションの終了状態を維持する必要がある場合は、次のようにクラスを追加して、小さなスクリプトを使用してアニメーションを追加することを検討してください。

実施例2

$('.first').mouseenter(function(){
    $('.first').addClass('banner');
});

.banner{
    -webkit-animation: bannermove 30s linear both;
    -moz-animation: bannermove 30s linear both;
    -ms-animation: bannermove 30s linear both;
    -o-animation: bannermove 30s linear both;
    animation: bannermove 30s linear both;
}

ユーザーがホバリングしなくなったときにアニメーションを一時停止し、再びホバリングしたときにアニメーションを再開する必要がある場合:

実施例3

$('.first').hover(function () {
    $('.first').addClass('banner');
    $('.banner').css('animationPlayState', 'running');
},

function () {
    $('.banner').css('animationPlayState', 'paused');
});
于 2013-10-13T23:15:24.110 に答える