Question

此代码中2小时！我试图改变我认为错误的一切。尝试在不同的浏览器，没有！

@keyframes faden {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.fatia {
  animation-duration: 4s;
  animation: faden;
  opacity: 0;
  animation-timing-function: linear;
  -webkit-animation-name: faden;
  -webkit-animation-duration: 4s;
  -webkit-animation: faden
}

<div id="fatia1" class="fatia"> <img class="img-responsive" src="graficos/imagens/imagens/banner_imotur_servicos_01.jpg" /></div>
<div id="fatia2" class="fatia"><img class="img-responsive" src="graficos/imagens/imagens/banner_imotur_servicos_02.jpg" /></div>
<div id="fatia3" class="fatia"><img class="img-responsive" src="graficos/imagens/imagens/banner_imotur_servicos_03.jpg" /></div>
<div id="fatia4" class="fatia"><img class="img-responsive" src="graficos/imagens/imagens/banner_imotur_servicos_04.jpg" /></div>
<div id="fatia5" class="fatia"><img class="img-responsive" src="graficos/imagens/imagens/banner_imotur_servicos_05.jpg" /></div>

Answer 1

问题是你的不透明度在fatia上设置为0。这使您的所有图像都不可见。尝试在课堂上使用它：

.fatia {
  animation: faden 4s linear;
  -webkit-animation: faden 4s linear;
}

然后添加moz等。

同样快速说明：如果图像似乎正在加载但未转换，请尝试向动画添加延迟。有时浏览器速度会改变转换的呈现方式。

CSS opacity动画无法在任何浏览器中运行

1 个答案: