CSS animation, just changes images with no animation-CodePudding

I am trying to change photos with a fade like animation but they just switch between themselves,

any idea how to fix it or what I am doing wrong? thank you in advance.

CSS: .slider{

width: 300px;
height: 400px;
background: url("images/flip1.png");
background-repeat: no-repeat;
background-size: 300px 300px;
animation: slide 20s ease-in-out;

}

@keyframes slide{ 25%{

    background: url("images/flip2.png");
    background-size: 300px 300px;
    background-repeat: no-repeat;
}
50%{
    
    background: url("images/flip3.png");
    background-size: 300px 300px;
    background-repeat: no-repeat;
}
75%{
    background: url("images/flip4.png");
    background-size: 300px 300px;
    background-repeat: no-repeat;
}
100%{
    background: url("images/flip1.png");
    background-size: 300px 300px;
    background-repeat: no-repeat;
}

}

html:

CodePudding user response：

I think it could help you.

.slide-container {
    position: relative;
}

.slide1 {
    width: 300px;
    height: 400px;
    background: red url("images/flip1.png");
    background-repeat: no-repeat;
    background-size: 300px 300px;
    animation: slide1 20s ease-in-out;
    position: relative;
}

.slide2 {
    width: 300px;
    height: 400px;
    background: blue url("images/flip2.png");
    background-repeat: no-repeat;
    background-size: 300px 300px;
    animation: slide2 20s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.slide3 {
    width: 300px;
    height: 400px;
    background: green url("images/flip3.png");
    background-repeat: no-repeat;
    background-size: 300px 300px;
    animation: slide3 20s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.slide4 {
    width: 300px;
    height: 400px;
    background: yellow url("images/flip4.png");
    background-repeat: no-repeat;
    background-size: 300px 300px;
    animation: slide4 20s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

@keyframes slide1 {
    0% {
        opacity: 1;
    }
    20% {
        opacity: 1;
    }
    25% {
        opacity: 0;
    }
    95% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes slide2 {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    45% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes slide3 {
    0% {
        opacity: 0;
    }
    45% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes slide4 {
    0% {
        opacity: 0;
    }
    70% {
        opacity: 0;
    }
    75% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

<div class="slide-container">
    <div class="slide1"></div>
    <div class="slide2"></div>
    <div class="slide3"></div>
    <div class="slide4"></div>
</div>

CodePudding user response：

Use prefixes for other browsers

 -webkit-animation: 4s linear 0s infinite alternate move_eye;
     -moz-animation: 4s linear 0s infinite alternate move_eye;
       -o-animation: 4s linear 0s infinite alternate move_eye;
          animation: 4s linear 0s infinite alternate move_eye;

https://developer.mozilla.org/ru/docs/Web/CSS/animation