Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprende Desafío: Implementar Animación CSS | Animaciones Avanzadas en CSS
Técnicas Avanzadas de CSS

bookDesafí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:

  1. Especifica el valor correcto para la propiedad animation-name, utilizando los cambios de estado predefinidos en la regla @keyframes con el nombre colorChange.
  2. Establece la función de tiempo en linear para asegurar una velocidad constante durante toda la animación.
  3. Define una duración para que la animación dure 6000ms.
  4. Configura la animación para que se repita infinite veces y así lograr un efecto continuo.
index.html

index.html

index.css

index.css

copy
  1. Asignar el nombre de la regla @keyframes como valor para la propiedad animation-name.
  2. Especificar linear como valor para la propiedad animation-timing-function para asegurar una velocidad constante.
  3. Establecer la propiedad animation-duration en 6000ms para determinar la duración de la animación.
  4. Utilizar infinite como valor para la propiedad animation-iteration-count para repetir la animación indefinidamente.
index.html

index.html

index.css

index.css

copy

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 6

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

What should the CSS code look like for the "Log in" button animation?

Can you explain how the @keyframes rule named colorChange should be defined?

Where exactly should I add these animation properties in my CSS?

Awesome!

Completion rate improved to 2.04

bookDesafí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:

  1. Especifica el valor correcto para la propiedad animation-name, utilizando los cambios de estado predefinidos en la regla @keyframes con el nombre colorChange.
  2. Establece la función de tiempo en linear para asegurar una velocidad constante durante toda la animación.
  3. Define una duración para que la animación dure 6000ms.
  4. Configura la animación para que se repita infinite veces y así lograr un efecto continuo.
index.html

index.html

index.css

index.css

copy
  1. Asignar el nombre de la regla @keyframes como valor para la propiedad animation-name.
  2. Especificar linear como valor para la propiedad animation-timing-function para asegurar una velocidad constante.
  3. Establecer la propiedad animation-duration en 6000ms para determinar la duración de la animación.
  4. Utilizar infinite como valor para la propiedad animation-iteration-count para repetir la animación indefinidamente.
index.html

index.html

index.css

index.css

copy

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 6
some-alt