Estoy tratando de cambiar las fotos con una animación que se desvanece, pero simplemente cambian entre sí,
¿Alguna idea de cómo solucionarlo o qué estoy haciendo mal? gracias de antemano.
CSS: .control deslizante{
width: 300px; height: 400px; background: url("images/flip1.png"); background-repeat: no-repeat; background-size: 300px 300px; animation: slide 20s ease-in-out;}
diapositiva de @fotogramas clave{ 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:
Creo que podría ayudarte.
.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>Usar prefijos para otros navegadores
-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;