Desafío: Implementar Animación CSS
Desafío
Mejora el atractivo visual del formulario de autorización añadiendo una animación al botón "Log in". Sigue estos pasos:
- Especifica el valor correcto para la propiedad
animation-name
, utilizando los cambios de estado predefinidos en la regla@keyframes
con el nombrecolorChange
. - Establece la función de tiempo en
linear
para asegurar una velocidad constante durante toda la animación. - Define una duración para que la animación dure
6000ms
. - Configura la animación para que se repita
infinite
veces y así lograr un efecto continuo.
index.html
index.css
- Asignar el nombre de la regla
@keyframes
como valor para la propiedadanimation-name
. - Especificar
linear
como valor para la propiedadanimation-timing-function
para asegurar una velocidad constante. - Establecer la propiedad
animation-duration
en6000ms
para determinar la duración de la animación. - Utilizar
infinite
como valor para la propiedadanimation-iteration-count
para repetir la animación indefinidamente.
index.html
index.css
¿Todo estuvo claro?
¡Gracias por tus comentarios!
Sección 4. Capítulo 6
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Awesome!
Completion rate improved to 2.04
Desafío: Implementar Animación CSS
Desliza para mostrar el menú
Desafío
Mejora el atractivo visual del formulario de autorización añadiendo una animación al botón "Log in". Sigue estos pasos:
- Especifica el valor correcto para la propiedad
animation-name
, utilizando los cambios de estado predefinidos en la regla@keyframes
con el nombrecolorChange
. - Establece la función de tiempo en
linear
para asegurar una velocidad constante durante toda la animación. - Define una duración para que la animación dure
6000ms
. - Configura la animación para que se repita
infinite
veces y así lograr un efecto continuo.
index.html
index.css
- Asignar el nombre de la regla
@keyframes
como valor para la propiedadanimation-name
. - Especificar
linear
como valor para la propiedadanimation-timing-function
para asegurar una velocidad constante. - Establecer la propiedad
animation-duration
en6000ms
para determinar la duración de la animación. - Utilizar
infinite
como valor para la propiedadanimation-iteration-count
para repetir la animación indefinidamente.
index.html
index.css
¿Todo estuvo claro?
¡Gracias por tus comentarios!
Sección 4. Capítulo 6