如何在 css 中使用 @keyframes 进行介绍？

Question

我正在制作另一个网站，这次我想创建一个图像介绍这是我尝试过的：

<style>
@keframes intro {
0% {background-image: url('intro1.jpg'); top: 0px; left: 0px;}
25% {background-image: url('intro1.jpg'); top: 0px; left: 200px;}
50% {background-image: url('intro1.jpg'); top: 200px; left: 200px;}
75% {background-image: url('intro1.jpg'); top: 0; left: 100px;}
100% {background-image: url('intro1.jpg); top: 0px; left: 0px;}
}
body {
animation-name: intro;
animation-delay: 0.002s;
position: relative;
animation-iteration-count: 1;
animation-duration: 5s;
height: auto;
}
</style>
<div>
</div>

什么都没有出现。 是否可以进行像 GMail 这样的图像介绍？ 谢谢，环形游戏

Answer 1

图像没有显示的原因可能是因为它还没有加载，因为在每个关键帧，它都会加载background-image ，并且因为它不需要动画（顺便说一下背景图像不是动画的。 ）。 一种解决方案是将background-image放在关键帧之外。

<style>
@keframes intro {
0% { top: 0px; left: 0px;}
25% { top: 0px; left: 200px;}
50% { top: 200px; left: 200px;}
75% { top: 0; left: 100px;}
100% { top: 0px; left: 0px;}
}
body {
animation-name: intro;
animation-delay: 0.002s;
position: relative;
animation-iteration-count: 1;
animation-duration: 5s;
height: auto;
background-image: url('intro1.jpg'); /* Put this here instead, it doesn't change and can't animate and on each animation it is being loaded so it might take time to be loaded and rendered, that's why you probably won't see it at all. */
}
</style>
<div>
</div>