CSS动画，只改变图像，没有动画

Question

我试着用像动画一样的淡入淡出来改变照片，但它们只是在它们之间切换，

你知道如何修复它，或者我做错了什么吗？提前谢谢你。

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;

}

@关键帧幻灯片{ 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：

Answer 1

我想这对你有帮助。

​

.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>

​

Answer 2

对其他浏览器使用前缀

 -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