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

Question

I am making another site and this time I want to create an image introduction Here is what i have tried:

<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>

And nothing appears. Is it possible to make an image introduction like GMail does? Thanks, Ring Games

Answer 1

The reason for the image not showing up is maybe because it was not yet loaded, because at each keyframe, it load the background-image , and since it doesn't need to be animated (and by the way background images are not animable.). A solution would be to put the background-image outside the keyframes.

<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>