Quiero tener una animación que comience en el centro pero se repita infinitamente. Como puede ver en el fragmento, los cubos comienzan primero en el centro, dispersos uniformemente a lo ancho, pero lo que quiero es que en el momento en que el cubo deje la pantalla a la izquierda, comience nuevamente a la derecha, para que sea perfecto. ¿Alguien sabe cómo hacer esto?
Aquí está el código:
#skillIcon { animation: moveLeft 5s linear infinite; width:100px; height:100px; background-color:#444; align-items:center; position:relative; } @-webkit-keyframes moveLeft { from { right: -30%; } to { right: 100%; } } #parentDiv{ background-color:#222; display:flex; position:relative; justify-content:space-between; align-items:center; } <div id="parentDiv"> <div id="skillIcon"> </div> <div id="skillIcon"> </div> <div id="skillIcon"> </div> </div>estás en el camino correcto, los marcos clave son el truco
@keyframes example { 0% {left:50%;} 50% {left:-30%;} 50.01% {left:130%;} 100% {left:50%;} } div { width: 10px; height: 10px; position: relative; left:50%; background-color: red; animation: example 4s linear infinite; }editado:
Encontré una solución mejor Usando solo 2 fotogramas clave y configurando el retraso, puede hacer que comience en cualquier lugar de la pantalla.
@keyframes example { 0% {left:110%;} 100% {left:-10%;} } div { width: 10px; height: 10px; position: relative; left:0%; background-color: red; animation: example 4s linear infinite; }luego, en css en el mismo div, establezca un retraso de -2 segundos en un ciclo de 4 segundos que comenzará en el centro del elemento.
<div style="animation-delay:-2s"/>