ホームページ >ウェブフロントエンド >CSSチュートリアル >このコード全体を無限ループさせたいと考えています

このコード全体を無限ループさせたいと考えています

WBOY
WBOYオリジナル
2024-07-18 07:44:20271ブラウズ

I am wanting to loop this entire code infinitely

こんにちは、以下に追加するコードがあります。最後の画像 (imagetest5) のアニメーションが終了し、次から開始した後に全体を無限にループしようとしています。 (画像テスト1)
助けてください!!

コード:

@keyframes 開始アニメーション {
0% { 不透明度: 0; }
10% { 不透明度: 1; }
20% { 不透明度: 0; }
100% { 不透明度: 0; }
}

@キーフレームのちらつき {
0%、100% { 不透明度: 1; }
50% { 不透明度: 0.3; }
}

.imagetest {
不透明度: 0;
アニメーション: start-animation 20 秒無限、フリッカー 2 秒無限;
}

.imagetest1 {
不透明度: 0;
アニメーション:
フェードイン 0.5 秒イーズイン 1 秒無限、
flicker1 1s cubic-bezier(0.4, 0, 1, 1) 1s 無限交互、
消失 1 0.5 秒 cubic-bezier(0.4, 0, 1, 1) 2 秒進む;
}

.imagetest2 {
不透明度: 0;
アニメーション:
フェードイン 0.5 秒イーズイン 6 秒無限、
flicker2 1s cubic-bezier(0.4, 0, 1, 1) 3s 無限交互、
消失2 0.5秒 cubic-bezier(0.4, 0, 1, 1) 4秒進む;
}

.imagetest3 {
不透明度: 0;
アニメーション:
フェードイン 0.5 秒イーズイン 10.5 秒無限、
flicker3 1s cubic-bezier(0.4, 0, 1, 1) 5s 無限交互、
消失3 0.5秒 cubic-bezier(0.4, 0, 1, 1) 6秒進む;
}

.imagetest4 {
不透明度: 0;
アニメーション:
フェードイン 0.5 秒 イーズイン 15 秒 無限、
flicker4 1s cubic-bezier(0.4, 0, 1, 1) 7s 無限代替、
消失4 0.5s cubic-bezier(0.4, 0, 1, 1) 8s forward;
}

.imagetest5 {
不透明度: 0;
アニメーション:
フェードイン 0.5 秒 イーズイン 17 秒 無限、
flicker4 1s cubic-bezier(0.4, 0, 1, 1) 7s 無限代替、
消失4 0.5s cubic-bezier(0.4, 0, 1, 1) 8s forward;
}

@keyframes フェードイン {
0% { 不透明度: 0; }
100% { 不透明度: 1; }
}

@keyframes flicker1 {
0% { 不透明度: 1; }
5%、25%、50%、75%、95%、100% { 不透明度: 0.8; }
10%、20%、30%、40%、60%、70%、80%、90% { 不透明度: 0.6; }
15%、35%、55%、85% { 不透明度: 0.4; }
45%、65%、88% { 不透明度: 0.2; }
}

@keyframes flicker2 {
0% { 不透明度: 1; }
5%、25%、50%、75%、95%、100% { 不透明度: 0.8; }
10%、20%、30%、40%、60%、70%、80%、90% { 不透明度: 0.6; }
15%、35%、55%、85% { 不透明度: 0.4; }
45%、65%、88% { 不透明度: 0.2; }
}

@keyframes flicker3 {
0% { 不透明度: 1; }
5%、25%、50%、75%、95%、100% { 不透明度: 0.8; }
10%、20%、30%、40%、60%、70%、80%、90% { 不透明度: 0.6; }
15%、35%、55%、85% { 不透明度: 0.4; }
45%、65%、88% { 不透明度: 0.2; }
}

@keyframes flicker4 {
0% { 不透明度: 1; }
5%、25%、50%、75%、95%、100% { 不透明度: 0.8; }
10%、20%、30%、40%、60%、70%、80%、90% { 不透明度: 0.6; }
15%、35%、55%、85% { 不透明度: 0.4; }
45%、65%、88% { 不透明度: 0.2; }
}

@keyframes消す1 {
0% { 不透明度: 1; }
100% { 不透明度: 0; }
}

@keyframes消す2 {
0% { 不透明度: 1; }
100% { 不透明度: 0; }
}

@keyframes消す3 {
0% { 不透明度: 1; }
100% { 不透明度: 0; }
}

@keyframes消す4 {
0% { 不透明度: 1; }
100% { 不透明度: 0; }
}

以上がこのコード全体を無限ループさせたいと考えていますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。