2

私はCSS3アニメーションにかなり慣れていないので、これは私にとって難しいものです. ユーザーにバーを認識させるために、ウェブサイトのトップバーに一種の反射効果を作成しようとしています。

だから私は実際に反射がバーの左から右にかなり速く、緩和してさまようことを望んでいます。

しかし、私には 2 つの問題があります… 1.) なぜこの思考が、background-size:cover;またはbackground-size:100% 100%? ピクセル幅を指定するとうまくいきますが、バー自体は常に 100% 幅であるため、常に 100% にしたいだけです。

2.) どうすれば 3 秒ほど一時停止できるのかわかりません。そのため、ページが読み込まれると反射効果が開始され、3 秒間一時停止してから繰り返されます。

これは可能ですか？

<div class="masked">
    <span class="inner">
    This is some Text
    </span>
</div>

background: linear-gradient(-45deg,  rgba(85,85,85,1) 0%,rgba(85,85,85,1) 48%,rgba(255,255,255,1) 50%,rgba(85,85,85,1) 52%,rgba(85,85,85,1) 100%);
    background-size:1500px 20px;
    animation-name: masked-animation;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;

デモ http://jsfiddle.net/7Akwf/

誰かが私を助けてくれますか？

4

1 に答える 1

2

アニメーションを 3 秒間一時停止して続行するには、最初に設定animation-iteration-count: infinite;してから定義を使用し@keyframesて、一時停止するパーセントを使用して遅延を制御する必要があります。

以下のデモでは0%-50%、フル アニメーションを使用しています。それから私%50-%100は一時停止していました。

を使用する場合、アニメーションをスクロールさせたい場合は、画面の左側から完全に外れるようbackground-size: 100% 100%;に設定する必要があります。また、完了時に右側から完全にスクロールするようbackground-position: -2000px 0;に調整する必要があります。@keyframesこの余分な距離があるため、探している効果を得るには、それに応じて持続時間を調整する必要があります。

デモ: http://jsfiddle.net/ThinkingStiff/jaRW3/

@keyframes masked-animation {
    0% {background-position: -2000px 0;}
    50% {background-position: 2000px 0;}
    100% {background-position: 2000px 0;}
}

ここでは、一時停止とアニメーション、つまりそれぞれ 3 秒の6s期間を使用しています。また、開始する前に 3 秒待機します。これは、多くのスペースを節約する短縮構文を使用します。50%%50

animation: masked-animation 6s ease-in-out 3s infinite;
background-position: -2000px 0;
background-repeat: no-repeat;
background-size: 100% 100%;
于 2011-12-31T10:35:46.423 に答える