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:

1. Specify the correct value for the transition-property property.

2. Set the duration of the transition to last 3000ms.

3. Ensure that the transition starts 200ms after a user hovers over the element.

4. Apply the time function cubic-bezier(0.165, 0.84, 0.44, 1) to control the transition's acceleration and deceleration.

1. Set the transition-property property to the appropriate value that aligns with the changes you want to animate on hover.

2. Specify the transition-duration to control how long the transition should last (in this case, 3000ms).

3. Utilize the transition-delay property to introduce a delay before the transition starts after a user hovers over the element (set it to 200ms).

4. Apply the cubic-bezier(0.165, 0.84, 0.44, 1) timing function to fine-tune the acceleration and deceleration of the transition.