首页 > web前端 > css教程 > 我想无限循环整个代码

我想无限循环整个代码

WBOY
发布: 2024-07-18 07:44:20
原创
278 人浏览过

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
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板