Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Challenge: Add a Smooth Transition Effect | Creating Smooth Transitions in CSS
Advanced CSS Techniques

book
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.

html

index.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="box"></div>
</body>
</html>
  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.

html

index.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="box"></div>
</body>
</html>

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 7

Fråga AI

expand
ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

some-alt