Conteúdo do Curso
Advanced CSS Techniques
Advanced CSS Techniques
Challenge: Add a Smooth Transition Effect
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.html
index.css
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.html
index.css
Obrigado pelo seu feedback!