1

画像間の純粋な CSS3 クロスフェーダーに取り組んでいます。私が抱えている問題は、画像が 2 つしかなく、2 番目の画像がフェードアウトすると、画像 1 に戻るのではなく、白にフェードアウトすることです。

私のあまり機能しないフィドルはここにあります：http://jsfiddle.net/uQU6y/2/

.item img {
    position:absolute;
    left:0;
    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;}
}

#f2 {
    -webkit-animation-delay: -4s;
}
4

4 に答える 4

1

こんにちは、html で 指定したjsfiddleid="f1"を見つけてください。ただし、css では使用していません。

于 2013-08-12T13:58:46.320 に答える
1

1このソリューションは改善できます。実際の画像を使用すると、最初に大まかな遷移があることがはっきりとわかります。これは、f2 を 999 に設定したためです。代わりに次のように使用します。

#f1 {
    z-index:999;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 10s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 10s;
}

次に、アニメーション ビットを次のように変更します。

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

これにより、#f2 の代わりに #f1 が遷移します。これは、アニメーションが最初からスムーズであることを意味します。

于 2014-12-08T02:56:29.037 に答える
0

CSS のタイミングとアニメーション コードの配置の単純な修正であることがわかりました。私が使用したコードは 3 つの画像でうまく機能しましたが、2 つの画像では白へのフェードを削除するためにアニメーションの継続時間を変更する必要がありました。また、アニメーション情報 (期間、反復、名前など) も入力する必要がありました。JSfiddle は次のとおりです。

コードの重要な部分:

#f2 {
    z-index:999;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 10s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 10s;
}
于 2013-08-15T08:35:09.870 に答える