CSS3で画像に移行を行う方法

Question

オーケー、私はアニメについて少しのことを学んだし、私は混乱しています。この

ul{ 
-webkit-animation-name: example; 
-webkit-animation-duration: 4s; 
animation-name: example; 
animation-duration: 6s; 
animation-iteration-count: infinite; 
} 
@-webkit-keyframes example { 
0% {background-image: 'image1';} 
25% {background-image: 'image2';} 
50% {background-image: 'image3';} 
100% {background-image: 'image4';} 
} 


@keyframes example { 
0% {background-image: 'image1';} 
25% {background-image: 'image2';} 
50% {background-image: 'image3';} 
100% {background-image: 'image4';} 
} 

を通じて実現しようとしてい

<ul> 
    <li><img src="image1" /></li> 
    <li><img src="image2" /></li> 
    <li><img src="image3" /></li> 
    <li><img src="image4" /></li> 
</ul> 

これら4枚の画像を持っているとどのようにそれらを仕事やイメージにする？私はそれをするために私の仕事の少しを試みたが、それは動作しませんイメージは表示されていません。

Answer 1

適切に設定したときに背景画像のアニメーションが動作することはわかっていますが、どうしたらよいか分かりません。

この場合、要素divは、背景イメージのサイズと同じサイズにならないため、高さが必要です。

また、適切な構文を使用する1つの必要性、background-image: url(image-path-and-name)

注、これはかかわらず、Chromeでのみ動作しているように見え（iOS版/サファリをチェックしませんでした）

div { 
 
    height: 150px; 
 
    width: 150px; 
 
    -webkit-animation-name: example; 
 
    -webkit-animation-duration: 12s; 
 
    -webkit-animation-iteration-count: infinite; 
 
    animation-name: example; 
 
    animation-duration: 12s; 
 
    animation-iteration-count: infinite; 
 
} 
 
@-webkit-keyframes example { 
 
    0% { background-image: url(http://placehold.it/150/f00); } 
 
25% { background-image: url(http://placehold.it/150/ff0); } 
 
50% { background-image: url(http://placehold.it/150/00f); } 
 
100% { background-image: url(http://placehold.it/150/0f0); } 
 
} 
 
@keyframes example { 
 
    0% { background-image: url(http://placehold.it/150/f00); } 
 
25% { background-image: url(http://placehold.it/150/ff0); } 
 
50% { background-image: url(http://placehold.it/150/00f); } 
 
100% { background-image: url(http://placehold.it/150/0f0); } 
 
}

<div></div>