css 为什么我的动画不能在不同的浏览器上工作？

jgwigjjp 于 2023-01-22 发布在其他

关注(0)|答案(1)|浏览(107)

我目前正在开发Html & CSS & JS网站。我不能使我的动画工作的一些原因。我的意思是，他们的工作在谷歌浏览器，但不是在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>

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

css

来源：https://stackoverflow.com/questions/74048729/why-my-animation-doesnt-work-on-different-browsers

1条答案

按热度按时间

k2fxgqgv1#

正如你所说，你的网站使用html，css和js，所以我建议使用javascript在所有浏览器上的一致结果。
我对javascript不太了解，因此我使用www.example.com中的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">

代码中有一些注解，解释您需要更改哪个元素才能获得不同的结果。
需要记住的一点是，如果你将渐变动画的持续时间从4s更改为任何其他值，你将不得不在javascript中将超时值更改为4000ms。

赞(0）回复(0）举报 2023-01-22

我来回答

css 为什么我的动画不能在不同的浏览器上工作？

1条答案

相关问题

热门标签

最新问答