Estoy tratando de hacer un santa corriendo en mi proyecto.
¿Cómo hacer loop transform: scaleX(1) y transform: scaleX(-1) cuando la animación comienza en 0% y 50%?
setTimeout(function(){ //Enter your stuff here $('.animation').css("transform", "scaleX(1)") }, 7500); .animation img { max-width: 100%; } .animation { width: 50px; position: absolute; bottom: 0; animation: example 15s infinite; padding: 5px 9px 1px 0; border-top-right-radius: 20px; border-top-left-radius: 20px; transform: scaleX(-1) } @keyframes example { 0%, 100% { left: 0; /* background: white; */ } 40% { /* background: green; */ } 30% { /* background: yellow; */ } 20% { /* background: orange; */ } 50% { left: 97%; /* background: blue; */ } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="animation"> <img src="https://lh3.googleusercontent.com/pw/AM-JKLX6lpuXIUQzWYC8J9vlnsS9Cb9irs-2kPKBM9XaugC4iDCag2-7w-zC7BSQls0Ea51YewUFFSJquODLZ8PfaAoqelAXOlCKmh0H7Cn9G5HcwX_u2XNT_tvr8ZD5as6He3dpMrrVH_-ZCaG1xctS_Tei=s512-no" alt="run santa run"> </div>Enlace Codepen: demostración
es una buena practica.
Traté de usar JS/Jquery listener para resolverlo, pero podría ser difícil porque necesitamos rastrear los cambios de KeyFrame en lugar de solo el punto de inicio/finalización.
Así que estoy pensando en resolverlo solo a través de CSS. Su requisito es voltear el Papá Noel cuando golpea la ventana de visualización. Si simplemente configuramos transform: scaleX(1) al 50%, entonces el santa girará a la mitad.
Por lo tanto, configuré el punto de marca en 1%, 49% y 99% para asegurarme de que Santa no volteará en estos puntos. A continuación se muestra mi código basado en su enlace codepen:
@keyframes example { 0%, 100% { transform: scaleX(-1) /* background: white; */ } 1%{ left:1%; transform: scaleX(-1); } 99%{ left:1%; transform: scaleX(1); } 40% { /* background: green; */ } 30% { /* background: yellow; */ } 20% { /* background: orange; */ } 49% { left:96%; transform: scaleX(-1) } 50% { transform: scaleX(1); /* background: blue; */ } }