2
.cuadrado2 {
background-color: blueviolet;
animation-name: cuadrado2;
animation-duration: 3s;
}   
@keyframes cuadrado2 {
from {transform: translatex(0px);}
to {transform: translatex(100%);}
}

Solo se mueve proporcionalmente al tamaño de la imagen, pero quiero que se mueva proporcionalmente al tamaño de la pantalla. saludos!

2 respuestas 2

0

TranslateX(100%) lo que esta haciendo es moverlo al 100% del ancho del elemento a la izquierda.

Cambia tu CSS por algo como position: absolute y a tu animacion cambiale las reglas de transform por left por ejemplo.

Igual esto depende de tus contenedores, porque position: absolute se ancla al contenedor superior que tenga un position relative, pero ya es un comienzo.

.cuadro {
  background-color: blueviolet;
  animation-name: mover-fuera;
  animation-duration: 3s;
  width: 25px;
  height: 25px;
  position: absolute;
}   

@keyframes mover-fuera{
  from {left:0;}
  to {left:100%;}
}
<div class="cuadro">
</div>

0

QUISE DECIR QUE SI CAMBIABA LA UNIDAD DE MEDIDA A "VW" ESTABA BIEN. ESA ERA LA RESPUESTA Y QUE ME FUNCIONÓ. SALUDOS!!!

1
  • Te recomiendo evitar usar mayúsculas, pues das la impresión de estar gritando.
    – Dante S.
    Commented el 2 jun. 2021 a las 0:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.