不透明度0.5

Question

は、これは私のCSSで行います

.sliding-background { 
    height: 300px; 
    width: 5000px; 
    animation: slide 30s linear infinite; 
} 

@keyframes slide { 
    0% { 
    transform: translate3d(0, 0, 0); 
    } 
    100% { 
    transform: translate3d(-1692px, 0, 0); 
    } 
} 

あなたは、最終的な結果はイメージのためのスライドで想像できるよう。

私の質問： は、画像/要素が画面外に出たときに0.5になるようにしたいと思います。

Answer 1

あなたの説明は少し短く、ここにコードはHTMLがありませんので、あなたの意図と問題点を正確に確認することができます。

BUT！ :)

あなたのコードとあなたの質問を見て最短の答えは少しアニメーションのキーフレームを編集することです。

アニメーションを100％ではなく、以前の80％と同じように終了させて​​ください。 最後の20％は不透明アニメーションです。 それはあまりにも速くならないようにだけ、適切なアニメーション時間を設定することを忘れないでください:)

@keyframes slide { 
    0% { 
    transform: translate3d(0, 0, 0); 
    } 
    80% { 
    transform: translate3d(-1692px, 0, 0); 
    } 
    100%{ 
    transform: translate3d(-1692px, 0, 0); 
    opacity:.5; 
    } 
} 

を80％がちょうど私の提案で、あなたが好きなものを使用することができます - ちょうどいくつか％を残すようにしてくださいあなたの不透明度の変更のためのキーフレームの

トランスフォームとキーフレームにベンダープレフィックスを使用することを忘れないでください！