在幻灯片中添加淡入淡出效果

Question

学习从w3school建立幻灯片......

我已经尝试在css中更改动画持续时间但没有任何工作

任何人都可以告诉我如何从幻灯片中添加淡入效果？

Answer 1

要延迟时间，请将此数字（2000）更改为showSlides函数中的其他内容：

 setTimeout(showSlides, 2000); // Change image every 2 seconds

要更改淡入淡出，请编辑css中的淡入淡出类：

    /* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}