首頁 > web前端 > css教學 > 主體

我想無限循環整個程式碼

WBOY
發布: 2024-07-18 07:44:20
原創
182 人瀏覽過

I am wanting to loop this entire code infinitely

大家好,我有這段程式碼,我將在下面添加它,我試圖在最後一個圖像(imagetest5)完成其動畫並開始返回後無限循環整個程式碼(圖像測試1)
請您幫忙! !

代碼:

@keyframes 開始動畫 {
0% { 不透明度: 0; }
10% { 不透明度: 1; }
20% { 不透明度: 0; }
100% { 不透明度: 0; }
}

@keyframes 閃爍 {
0%, 100% { 不透明度: 1; }
50% { 不透明度: 0.3; }
}

.imagetest {
不透明度:0;
動畫:開始動畫20s無限,閃爍2s無限;
}

.imagetest1 {
不透明度:0;
動畫:
淡入 0.5 秒 緩入 1 秒 無限,
flicker1 1s 三次貝塞爾曲線(0.4, 0, 1, 1) 1s 無限交替,
消失1 0.5s 三次貝塞爾曲線(0.4, 0, 1, 1) 向前2s;
}

.imagetest2 {
不透明度:0;
動畫:
淡入 0.5 秒 緩入 6 秒 無限,
flicker2 1s 三次貝塞爾曲線(0.4, 0, 1, 1) 3s 無限交替,
消失2 0.5s 三次貝塞爾曲線(0.4, 0, 1, 1) 向前4s;
}

.imagetest3 {
不透明度:0;
動畫:
淡入 0.5 秒 緩入 10.5 秒 無限,
flicker3 1s 三次貝塞爾曲線(0.4, 0, 1, 1) 5s 無限交替,
消失3 0.5s 三次貝塞爾曲線(0.4, 0, 1, 1) 6s 向前;
}

.imagetest4 {
不透明度:0;
動畫:
淡入 0.5 秒 緩入 15 秒 無限,
flicker4 1s 三次貝塞爾曲線(0.4, 0, 1, 1) 7s 無限交替,
消失4 0.5s 三次貝塞爾曲線(0.4, 0, 1, 1) 向前8s;
}

.imagetest5 {
不透明度:0;
動畫:
淡入 0.5 秒 緩入 17 秒 無限,
flicker4 1s 三次貝塞爾曲線(0.4, 0, 1, 1) 7s 無限交替,
消失4 0.5s 三次貝塞爾曲線(0.4, 0, 1, 1) 向前8s;
}

@關鍵影格淡入 {
0% { 不透明度: 0; }
100% { 不透明度: 1; }
}

@關鍵影格閃爍1 {
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; }
}

@關鍵影格閃爍4 {
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; }
}

@關鍵影格消失1 {
0% { 不透明度: 1; }
100% { 不透明度: 0; }
}

@關鍵影格消失2 {
0% { 不透明度: 1; }
100% { 不透明度: 0; }
}

@關鍵影格消失3 {
0% { 不透明度: 1; }
100% { 不透明度: 0; }
}

@關鍵影格消失4 {
0% { 不透明度: 1; }
100% { 不透明度: 0; }
}

以上是我想無限循環整個程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!