0
247
VisualizaçõesIniciar una animación CSS desde una posición diferente
Estoy construyendo un modelo del sistema solar y estoy usando animaciones CSS para animar los planetas que se mueven alrededor del sol así:
.earthMini { border-radius: 50%; position: absolute; --radius: 1rem; top: calc(50% - var(--radius)); left: calc(50% - var(--radius)); width: calc(2 * var(--radius)); height: calc(2 * var(--radius)); background: url("../../planetTextures/earth.jpg") repeat-x; background-size: 100% 100%; animation: earthOrbit 45s linear infinite, translateBackground 50s infinite linear; } @keyframes earthOrbit { from { transform: rotate(0deg) translateX(13rem) rotate(0deg); } to { transform: rotate(360deg) translateX(13rem) rotate(-360deg); } }Esto funciona muy bien, sin embargo, cuando la página se carga por primera vez, todos los planetas se animan desde la misma posición de inicio:
Estoy buscando una manera de que cada planeta tenga una posición de inicio diferente en su órbita.
Tengo un codesandbox aquí con mi código completo.
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
Puede usar una regla animation-delay negativa para que la animación comience más adelante en su animación inicial.
puede configurar esto a través de algunos valores arbitrarios en su css, o aplicar un aleatorio real usando javascript.
.earthMini { border-radius: 50%; position: absolute; --radius: 1rem; top: calc(50% - var(--radius)); left: calc(50% - var(--radius)); width: calc(2 * var(--radius)); height: calc(2 * var(--radius)); background: url("../../planetTextures/earth.jpg") repeat-x; background-size: 100% 100%; animation: earthOrbit 45s linear infinite, translateBackground 50s infinite linear; animation-delay: -45s; // <- this will place earth at the point of animation for 45s, } @keyframes earthOrbit { from { transform: rotate(0deg) translateX(13rem) rotate(0deg); } to { transform: rotate(360deg) translateX(13rem) rotate(-360deg); } }
·
Juan Pablo Isaza
Relatório
Responde à pergunta