1

アニメーションが行われる前に定義された元のcss値がアニメーションによって変更されるかどうかを知る必要がありますか？

私の知る限り、答えはイエスですが、問題があります。div内に画像を配置し、ホバーされたときにのみアニメーションを実行したいと思います。画像で「一時停止」に設定されたAnimation-play-stateは、画像上でホバリングが発生するまでアニメーションを停止するのに役立ちました。画像にカーソルを合わせると、animation-play-stateが「running」に設定されます。

すべてが順調に進んでいましたが、突然、アニメーションが元のcss値を変更した場合、画像にカーソルを合わせたときに以前に設定されたanimation-play-stateも永続的に変更され、その後もアニメーションを再生し続ける必要があることに気付きました。ただし、アニメーションはホバー状態でのみ再生されます。なんで？

HTML

<div class="hs-wrapper">
    <img src="i.jpg" alt="image01"/>
    <img src="a.jpg" alt="image01"/>
    <img src="c.jpg" alt="image03"/>
    <img src="d.jpg" alt="image04"/>
    <img src="e.jpg" alt="image05"/>
    <img src="f.jpg" alt="image06"/>
</div>

CSS

.hs-wrapper img {
    width: 333px;
    height: 500px;
    top: 0px;
    left: 0px;
    position: absolute;
    -webkit-animation: showMe 0.8s linear infinite 0s forwards;
    -moz-animation: showMe 0.8s linear infinite 0s forwards;
    -o-animation: showMe 0.8s linear infinite 0s forwards;
    -ms-animation: showMe 0.8s linear infinite 0s forwards;
    animation: showMe 0.8s linear infinite 0s forwards;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    -ms-animation-play-state: paused;
    animation-play-state: paused;
}

.hs-wrapper:hover img {
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    -ms-animation-play-state: running;
    animation-play-state: running;
}

@-moz-keyframes showMe {
    0% {
        visibility: visible;
        z-index: 100;
    }

    12.5% {
        visibility: visible;
        z-index: 100;
    }

    25% {
        visibility: hidden;
        z-index: 0;
    }

    100% {
        visibility: hidden;
        z-index: 0;
    }
}
4

1 に答える 1

0

あなたがすべきことは、ユーザーが画像にカーソルを合わせたときのjqueryイベントリスナーを追加することです。それが発生したら、.hs-wrapper imgセクションの再生状態ルールをすべて実行中と変更します。それが最善の解決策です。

于 2013-01-12T22:06:07.510 に答える