为什么我的 animation 不能在不同的浏览器上运行？

Question

我目前正在 Html & CSS & JS 上开发网站。 由于某些原因，我无法让我的 animation 工作。 我的意思是，它们可以在 Google Chrome 上运行，但不能在 Mozilla 上运行。 这是我的 CSS 文件中的一些代码。

<style>
.fullBackground {
    background-color: rgba(0,0,0,0.5); /* Tint color */
    background-blend-mode: multiply;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: slideBg 25s linear infinite;
    background-image: url("/assets/slideshowImages/1.jpg");
  }

@keyframes slideBg {
    0% {
      background-image: url("/assets/slideshowImages/1.jpg");
    }
    5% {
      background-image: url("/assets/slideshowImages/1.jpg");
    }
    10% {
      background-image: url("/assets/slideshowImages/1.jpg");
    }
    15% {
      background-image: url("/assets/slideshowImages/1.jpg");
    }
    20% {
      background-image: url("/assets/slideshowImages/1.jpg");
    }

    25% {
      background-image: url("/assets/slideshowImages/2.jpg");
    }
    30% {
      background-image: url("/assets/slideshowImages/2.jpg");
    }
    35% {
      background-image: url("/assets/slideshowImages/2.jpg");
    }
    40% {
      background-image: url("/assets/slideshowImages/2.jpg");
    }
    45% {
      background-image: url("/assets/slideshowImages/2.jpg");
    }

    50% {
      background-image: url("/assets/slideshowImages/3.jpg");
    }
    55% {
      background-image: url("/assets/slideshowImages/3.jpg");
    }
    60% {
      background-image: url("/assets/slideshowImages/3.jpg");
    }
    65% {
      background-image: url("/assets/slideshowImages/3.jpg");
    }
    70% {
      background-image: url("/assets/slideshowImages/3.jpg");
    }
    75% {
      background-image: url("/assets/slideshowImages/4.jpg");
    }80% {
      background-image: url("/assets/slideshowImages/4.jpg");
    }85% {
      background-image: url("/assets/slideshowImages/4.jpg");
    }90% {
      background-image: url("/assets/slideshowImages/4.jpg");
    }
    100% {
      background-image: url("/assets/slideshowImages/4.jpg");
    }
  }
</style>

这是我在 HTML 中的使用方式

<div class="fullBackground"></div>

如果你能给我任何线索，我将非常高兴。 先感谢您！

Answer 1

正如您所说，您正在为您的网站使用 html、css 和 js，因此我建议使用 javascript 在所有浏览器中获得一致的结果。

我对 javascript 不太了解，所以为了过渡，我使用 javascript 表格 w3.schools.com

 var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("slides"); // The images for transition are selected by the class name of "slides" //so whichever image has the class name of slides will get picked by this javascript code for the slideshow animation. for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } myIndex++; if (myIndex > x.length) { myIndex = 1 } x[myIndex - 1].style.display = "block"; setTimeout(carousel, 4000); // Here 4000 is the time in millisecond fot an image to transition from one to another. }

 .slides { width: 30rem; height: 20rem; }.fading { animation: fading 4s infinite /* 4s defines how much time does 1 image takes for fading in and fading out */ } /* Here the image fades in form opacity 0 to 1 from the 0% time 25% time */ @keyframes fading { 0% { opacity: 0 } 25% { opacity: 1 } 75% { opacity: 1 } 100% { opacity: 0 } } /* The image stays of opacity 1 for the duration of 2s as 25% to 75% of 4s is 2s. */

 <img class="slides fading" src="https://picsum.photos/id/10/200/300"> <img class="slides fading" src="https://picsum.photos/id/11/200/300"> <img class="slides fading" src="https://picsum.photos/id/13/200/300"> <img class="slides fading" src="https://picsum.photos/id/16/200/300">

代码中有注释说明您需要更改哪个元素才能获得不同的结果。

要记住的一件事是，如果将 animation 的衰落持续时间从 4 秒更改为任何其他值，则必须将 javascript 中的超时值更改为 4000 毫秒。