Conteúdo do Curso
Advanced CSS Techniques
Advanced CSS Techniques
Challenge: Adding Transition
Task
Enhance the visual experience of the div
element with the class name box
by adding a smooth transition effect to its hover changes. Follow these steps:
- Specify the correct value for the
transition-property
property. - Set the duration of the transition to last
3000ms
. - Ensure that the transition starts
200ms
after a user hovers over the element. - Apply the time function
cubic-bezier(0.165, 0.84, 0.44, 1)
to control the transition's acceleration and deceleration.
index
index
index
- Set the
transition-property
property to the appropriate value that aligns with the changes you want to animate on hover. - Specify the
transition-duration
to control how long the transition should last (in this case,3000ms
). - Utilize the
transition-delay
property to introduce a delay before the transition starts after a user hovers over the element (set it to200ms
). - Apply the
cubic-bezier(0.165, 0.84, 0.44, 1)
timing function to fine-tune the acceleration and deceleration of the transition.
index
index
index
Obrigado pelo seu feedback!