Estoy usando CSS para crear animaciones para mi sitio web. Cuando se carga la página de inicio, quiero que mi nombre y una imagen se deslicen desde un lado, "mi nombre" aparece a la izquierda y una imagen a la derecha. Mi problema ahora es que si la pantalla es lo suficientemente pequeña como para que "mi nombre" se ajuste, entonces, cuando comienzan las animaciones, primero no se ajusta, pero cuando termina, el texto se ajusta, dejando atrás una transición repentina de "mi nombre". . Este video debería explicarlo mejor.

Entonces, mi pregunta es ¿cómo puedo hacer que la animación general sea fluida incluso si el texto tiene que ajustarse?

Esta es la siguiente animación CSS que estoy usando:

 @keyframes slideToLeft { from { margin-left: 100%; } to { margin-left: 0%; } } @keyframes slideToRight { from { margin-left: -100%; } to { margin-left: 0%; } }