Ejercicios de práctica de CSS

Ejercicio 22

Crea una animación de texto utilizando @keyframes para hacer que el texto cambie de color y se desplace.

Lo resolví del siguiente modo:

CSS:

                .animated-text {
                    font-size: 40px;
                    font-weight: bold;
                    text-align: center;
                    animation: moveAndColorChange 3s infinite;
                }

                @keyframes moveAndColorChange {
                    0% {
                        transform: translateX(0);
                        color: #3498db;
                    }
                    50% {
                        transform: translateX(150px);
                        color: #e74c3c;
                    }
                    100% {
                        transform: translateX(0);
                        color: #3498db;
                    }
                }
            

HTML:

                <div class="animated-text">¡Este texto se desplaza y cambia de color!</div>