Как сделать введение с @keyframes в css?

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>