Question

为什么this page的代码仅适用于Chrome？

如果我只使用背景颜色而不是图像，它似乎适用于所有浏览器。是否有可能图像不包含在动画中？

<!DOCTYPE html>
<html>
<head>
<style> 

div.slideshow
{
width:957px;
height:310px;
margin:0;
padding:0;
border:0;
border-collapse:collapse;
background-image:url('about.jpg');
position:relative;
animation-name:myfirst;
animation-duration:60s;
animation-timing-function:cubic-bezier(0.5,0,0.5,1);
animation-delay:5s;
animation-iteration-count:infinite;
animation-direction:normal;
animation-play-state:running;

/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:60s;
-webkit-animation-timing-function:cubic-bezier(0.5,0,0.5,1);
-webkit-animation-delay:5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running;
}

@keyframes myfirst
{
0%   {background-image:url('about.jpg');}
25%  {background-image:url('exhibitions.jpg');}
50%  {background-image:url('exhibitions2.jpg');}
75%  {background-image:url('medical.jpg');}
100% {background-image:url('about.jpg');}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background-image:url('about.jpg');}
25%  {background-image:url('exhibitions.jpg');}
50%  {background-image:url('exhibitions2.jpg');}
75%  {background-image:url('medical.jpg');}
100% {background-image:url('about.jpg');}
}

</style>
</head>
<body>

<div class="slideshow"></div>


</body>
</html>

Answer 1

您应该添加moz和o前缀，或者获取Prefix-Free库并删除webkit部分以修复前缀。 background-images应该和颜色一样具有动画效果，但我可能错了。

Answer 2

背景图像无法正式制作动画，并且在首次提出此问题5年后，情况仍然如此。如果它可以在Chrome中运行，它会使用自己的方法来对背景图像进行动画处理，而无需遵循任何特定规范，并且它所做的任何事情都未反映在任何规范中，因此无法依靠。

如果您想从一个图像渐变为另一个图像（我想这就是Chrome所做的事情），请使用JavaScript在现有图像之上渐变一个单独的图像层。

为什么此CSS代码仅适用于Chrome？

2 个答案: