web-dev-qa-db-ja.com

ループ内のCSSを使用した画像間のクロスフェード

ループ内の画像間をフェードインしたい（結果はここ-- jsfiddle.net/5M2PD のように）が、純粋にCSSを経由し、JavaScriptは経由しない。キーフレームを使ってみましたがうまくいきませんでした。助けてください。

@keyframes cf3FadeInOut {
    0% {
        opacity:1;
    }
    45% {
        opacity:1;
    }
    55% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

#cf3 img.top {
   animation-name: cf3FadeInOut;
   animation-timing-function: ease-in-out;
   animation-iteration-count: infinite;
   animation-duration: 10s;
   animation-direction: alternate;
}
cssfadekeyframe
17
Rachit Sharma

私はあなたのフィドルをベースにして、スクリプトなしで機能させました。

更新されたデモ

HTMLにIDを設定する必要がありました

<div class="fadein">
    <img id="f3" src="http://i.imgur.com/R7A9JXc.png">
    <img id="f2" src="http://i.imgur.com/D5yaJeW.png">
    <img id="f1" src="http://i.imgur.com/EUqZ1Er.png">
</div>

そしてCSSは：

.fadein img {
    position:absolute;
    left:-65px;
    top:0;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 6s;
}

@-webkit-keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}

#f1 {
    background-color: lightblue;
}
#f2 {
    -webkit-animation-delay: -4s;
    background-color: yellow;
}
#f3 {
    -webkit-animation-delay: -2s;
    background-color: lightgreen;
}

キーフレームを設定して、適切なトランジションで、時間の約1/3が見えるようにします。次に、イメージごとに異なる遅延を設定して、それらが交互になるようにします。ブラウザを完全にサポートしたい場合は、さらに多くのベンダープレフィックスが必要になります。私は-webkit-とベアプロパティを使用したので、あなたはアイデアを得ます。

28
vals