Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Desafío: Agregar un Efecto de Transición Suave | Creación de Transiciones Suaves en CSS
Técnicas Avanzadas de CSS

bookDesafío: Agregar un Efecto de Transición Suave

Tarea

Mejorar la experiencia visual del elemento div con el nombre de clase box añadiendo un efecto de transición suave a sus cambios al pasar el cursor. Siga estos pasos:

  1. Especificar el valor correcto para la propiedad transition-property.
  2. Establecer la duración de la transición en 3000ms.
  3. Asegurarse de que la transición comience 200ms después de que un usuario pase el cursor sobre el elemento.
  4. Aplicar la función de tiempo cubic-bezier(0.165, 0.84, 0.44, 1) para controlar la aceleración y desaceleración de la transición.
index.html

index.html

index.css

index.css

copy
  1. Establecer la propiedad transition-property con el valor apropiado que corresponda a los cambios que se desean animar al pasar el cursor.
  2. Especificar transition-duration para controlar la duración de la transición (en este caso, 3000ms).
  3. Utilizar la propiedad transition-delay para introducir un retraso antes de que comience la transición después de que el usuario pase el cursor sobre el elemento (configurar en 200ms).
  4. Aplicar la función de temporización cubic-bezier(0.165, 0.84, 0.44, 1) para ajustar la aceleración y desaceleración de la transición.
index.html

index.html

index.css

index.css

copy

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 3. Capítulo 7

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 CSS properties should I animate for the `.box` element?

Can you show me an example of how to write the transition property in CSS?

What visual changes should happen when I hover over the `.box` element?

Awesome!

Completion rate improved to 2.04

bookDesafío: Agregar un Efecto de Transición Suave

Desliza para mostrar el menú

Tarea

Mejorar la experiencia visual del elemento div con el nombre de clase box añadiendo un efecto de transición suave a sus cambios al pasar el cursor. Siga estos pasos:

  1. Especificar el valor correcto para la propiedad transition-property.
  2. Establecer la duración de la transición en 3000ms.
  3. Asegurarse de que la transición comience 200ms después de que un usuario pase el cursor sobre el elemento.
  4. Aplicar la función de tiempo cubic-bezier(0.165, 0.84, 0.44, 1) para controlar la aceleración y desaceleración de la transición.
index.html

index.html

index.css

index.css

copy
  1. Establecer la propiedad transition-property con el valor apropiado que corresponda a los cambios que se desean animar al pasar el cursor.
  2. Especificar transition-duration para controlar la duración de la transición (en este caso, 3000ms).
  3. Utilizar la propiedad transition-delay para introducir un retraso antes de que comience la transición después de que el usuario pase el cursor sobre el elemento (configurar en 200ms).
  4. Aplicar la función de temporización cubic-bezier(0.165, 0.84, 0.44, 1) para ajustar la aceleración y desaceleración de la transición.
index.html

index.html

index.css

index.css

copy

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 3. Capítulo 7
some-alt