CSS3グラデーショングラデーションアニメーション - background-size：カバーが機能しない？

Question

私は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; 

DEMOhttp://jsfiddle.net/7Akwf/

誰かがそれで私を助けてくださいことはできますか？

Answer 1

アニメーションを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;} 
} 

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

animation: masked-animation 6s ease-in-out 3s infinite; 
background-position: -2000px 0; 
background-repeat: no-repeat; 
background-size: 100% 100%;