Animación de fondo CSS – no funciona correctamente.
Creo que todo está bien, pero aún no funciona…
Firefox – bien
Edge, Opera, otros – no funcionan bien (añade una pausa al final… a veces saltándose los últimos cuadros)
#box{
overflow: hidden;
width: 416px;
height: 416px;
margin: 0px;
padding: 0px;
display: inline-block;
border: 0px;
font-size: 0px;
letter-spacing: 0px;
word-spacing: 0px;
}
#tlo{
width: 12064px;
height: 416px;
background-image:
url(‘https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka00.jpg’), url(‘https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka01.jpg’), url(‘https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka02.jpg’), url(‘https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka03.jpg’), url(‘https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka04.jpg’), url(‘https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka05.jpg’), url(‘https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka06.jpg’), url(‘https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka07.jpg’), url(‘https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka10.jpg’), url(‘https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka11.jpg’), url(‘https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka14.jpg’), url(‘https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka15.jpg’), url(‘https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka16.jpg’), url(‘https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka17.jpg’), url(‘https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka18.jpg’), url(‘https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka19.jpg’), url(‘https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka20.jpg’), url(‘https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka21.jpg’), url(‘https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka22.jpg’), url(‘https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka23.jpg’), url(‘https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka24.jpg’), url(‘https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka25.jpg’), url(‘https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka26.jpg’), url(‘https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka27.jpg’), url(‘https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka28.jpg’);
background-repeat: no-repeat;
background-position: 0px, 416px, 832px, 1248px, 1664px, 2080px, 2496px, 2912px, 3328px, 3744px, 4160px, 4576px, 4992px, 5408px, 5824px, 6240px, 6656px, 7072px, 7488px, 7904px, 8320px, 8736px, 9152px, 9568px, 9984px, 10400px, 10816px, 11232px, 11648px;
position: relative;
left: 0;
top: 0;
}
#tlo:hover{
animation-name: tlo-tumb-animacja;
animation-duration: 1s;
animation-timing-function: steps(28);
animation-iteration-count: infinite;
}
@keyframes tlo-tumb-animacja {
from {transform: translateX(0);}
to {transform: translateX(-96.55172414%);}
}
everyimages:
animation:
¿Toma algún tiempo volver a la posición cero… más de un cuadro?
¿Es un problema la longitud de los elementos traducidos en div?
¿Dónde está el error? Los navegadores (consola) dicen que todo está bien… sin errores…
Codepen
davy.ai
El problema parece estar con la animación que no se transiciona suavemente en algunos navegadores. Podría estar relacionado con la función de tiempo utilizada en la animación o la forma en que se posicionan las imágenes de fondo.
Algunas posibles soluciones para probar:
– Ajustar la función de tiempo de la animación a un valor diferente, como lineal o ease-in-out.
– Cambiar la forma en que se posicionan las imágenes de fondo, utilizando valores de píxeles en lugar de porcentajes.
– Verificar si hay algún estilo o configuración en conflicto que pueda estar afectando la animación.
También es posible que la animación esté funcionando correctamente y que el comportamiento diferente en diferentes navegadores se deba a niveles variables de compatibilidad u optimización del navegador. Sin más información o pruebas, es difícil decir con certeza cuál es el problema exacto.