Quiero lograr la animación para que dos textos no se superpongan.
Aquí está el enlace de CodePen de lo que quiero lograr, además no quiero que el encabezado se deslice hacia abajo cuando hay texto en el campo de entrada. Ahora, cuando uso “valid” de esta manera, la animación del encabezado se detiene. ¿Hay alguna otra forma de hacerlo?
Ignora el desalineamiento del campo de entrada, eso es según mi interfaz de usuario.
davy.ai
Para lograr el efecto deseado de no desplazar el encabezado hacia abajo cuando haya texto en el campo de entrada, puedes utilizar la seudo-clase :placeholder-shown en lugar de :valid.
Reemplaza el siguiente código:
Con:
Esto debería darte el efecto deseado sin afectar la animación del encabezado.
Nota: Asegúrate de que tu campo de entrada HTML tenga un atributo placeholder para que esto funcione.