我正在尝试让 CSS 动画同步，以便同时填充进度条和更改背景。
例如，在我的示例中，进度条应该花费 5000 毫秒，然后每 5000 毫秒背景图像应该更改一次。
我以为我的这个设置正确地将我的背景动画持续时间设置为 20000 毫秒，并且每一步以 25% 的间隔变化，但这只是没有正确同步。
我在这里遗漏了什么，或者让这样的东西准确同步真的不可行吗？
.progress-bar {
width: 100%;
height: 30px;
background-color: black;
}
.progress-bar > div {
background-color: blue;
height: 30px;
animation: progress-bar 5000ms linear;
animation-iteration-count: infinite;
}
.container {
width: 100%;
height: 500px;
animation: bg 20000ms linear;
animation-iteration-count: infinite;
}
@keyframes progress-bar {
0% {
width: 0px;
}
100% {
width: 100%;
}
}
@keyframes bg {
0% {background-image: url("https://source.unsplash.com/1600x900/?nature,water");}
25% {background-image: url("https://source.unsplash.com/1600x900/?mountain");}
50% {background-image: url("https://source.unsplash.com/1600x900/?tree");}
75% {background-image: url("https://source.unsplash.com/1600x900/?river");}
}<div class="container">
<div class="progress-bar"><div></div></div>
</div>你几乎好了，你需要通过添加更多步骤来避免过渡
.progress-bar {
width: 100%;
height: 30px;
background-color: black;
}
.progress-bar > div {
background-color: blue;
height: 30px;
animation: progress-bar 5000ms linear;
animation-iteration-count: infinite;
}
.container {
width: 100%;
height: 500px;
animation: bg 20000ms linear;
animation-iteration-count: infinite;
}
@keyframes progress-bar {
0% {
width: 0px;
}
100% {
width: 100%;
}
}
@keyframes bg {
0%,24.9% {background-image: url("https://source.unsplash.com/1600x900/?nature,water");}
25%,49.9% {background-image: url("https://source.unsplash.com/1600x900/?mountain");}
50%,74.9% {background-image: url("https://source.unsplash.com/1600x900/?tree");}
75%,100% {background-image: url("https://source.unsplash.com/1600x900/?river");}
}<div class="container">
<div class="progress-bar"><div></div></div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句