Why my animation doesnt work on different browsers? - html

Question

I am currently developing website on Html & CSS & JS.
I cant make my animation work for some reasons. I mean, they work on Google Chrome but not on Mozilla. Here is some code from my CSS file.
<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>
And here is how I use it in HTML
<div class="fullBackground"></div>
I would be very very glad to you, if you might give me any clue.
Thank you in advance!

Answer 1

As you have said you are using html, css and js for your website, so I would suggest using javascript for consistent results across all browsers.
I don't have a good knowledge of javascript so for transition I am using javascript form 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">
There are comments in the code explaining which element you need to change to get different outcomes.
One thing to keep in mind is if you change the fading animation duration from 4s to any other value you will have to change the timeout value 4000ms in javascript.