Desafí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:
- Especificar el valor correcto para la propiedad
transition-property. - Establecer la duración de la transición en
3000ms. - Asegurarse de que la transición comience
200msdespués de que un usuario pase el cursor sobre el elemento. - 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.css
- Establecer la propiedad
transition-propertycon el valor apropiado que corresponda a los cambios que se desean animar al pasar el cursor. - Especificar
transition-durationpara controlar la duración de la transición (en este caso,3000ms). - Utilizar la propiedad
transition-delaypara introducir un retraso antes de que comience la transición después de que el usuario pase el cursor sobre el elemento (configurar en200ms). - 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.css
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
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
Desafí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:
- Especificar el valor correcto para la propiedad
transition-property. - Establecer la duración de la transición en
3000ms. - Asegurarse de que la transición comience
200msdespués de que un usuario pase el cursor sobre el elemento. - 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.css
- Establecer la propiedad
transition-propertycon el valor apropiado que corresponda a los cambios que se desean animar al pasar el cursor. - Especificar
transition-durationpara controlar la duración de la transición (en este caso,3000ms). - Utilizar la propiedad
transition-delaypara introducir un retraso antes de que comience la transición después de que el usuario pase el cursor sobre el elemento (configurar en200ms). - 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.css
¡Gracias por tus comentarios!