如何在 CSS3 中对图像进行过渡

Question

好的，我有这 4 张图片

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

我已经学到了一些关于动画的知识，并试图通过这个来实现

 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';}
}

我很困惑如何使它们工作或图像？我尝试了一些工作来做到这一点，但它不起作用，没有显示任何图像。

Answer 1

我不确定您想要发生什么，尽管我知道正确设置时对背景图像进行动画处理。

请注意，元素（在本例中为div）必须具有高度，因为它不会根据背景图像的大小调整自身大小。

此外，还需要使用正确的语法，background-image: url(image-path-and-name)

请注意，这似乎仅适用于Chrome（未与iOS/Safari一起检查）

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>