Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lära Utmaning: Lägg till en Mjuk Övergångseffekt | Skapa Mjuka Övergångar i CSS
Avancerade CSS-tekniker

bookUtmaning: Lägg till en Mjuk Övergångseffekt

Uppgift

Förbättra den visuella upplevelsen av div-elementet med klassnamnet box genom att lägga till en mjuk övergångseffekt vid hovring. Följ dessa steg:

  1. Ange rätt värde för egenskapen transition-property.
  2. Ställ in övergångens varaktighet till 3000ms.
  3. Säkerställ att övergången startar 200ms efter att användaren hovrar över elementet.
  4. Använd tidsfunktionen cubic-bezier(0.165, 0.84, 0.44, 1) för att styra övergångens acceleration och inbromsning.
index.html

index.html

index.css

index.css

copy
  1. Ange egenskapen transition-property till ett lämpligt värde som motsvarar de ändringar du vill animera vid hovring.
  2. Specificera transition-duration för att styra hur länge övergången ska pågå (i detta fall 3000ms).
  3. Använd egenskapen transition-delay för att införa en fördröjning innan övergången startar efter att användaren hovrar över elementet (sätt den till 200ms).
  4. Tillämpa tidsfunktionen cubic-bezier(0.165, 0.84, 0.44, 1) för att finjustera acceleration och inbromsning av övergången.
index.html

index.html

index.css

index.css

copy

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 7

Fråga AI

expand

Fråga AI

ChatGPT

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

Awesome!

Completion rate improved to 2.04

bookUtmaning: Lägg till en Mjuk Övergångseffekt

Svep för att visa menyn

Uppgift

Förbättra den visuella upplevelsen av div-elementet med klassnamnet box genom att lägga till en mjuk övergångseffekt vid hovring. Följ dessa steg:

  1. Ange rätt värde för egenskapen transition-property.
  2. Ställ in övergångens varaktighet till 3000ms.
  3. Säkerställ att övergången startar 200ms efter att användaren hovrar över elementet.
  4. Använd tidsfunktionen cubic-bezier(0.165, 0.84, 0.44, 1) för att styra övergångens acceleration och inbromsning.
index.html

index.html

index.css

index.css

copy
  1. Ange egenskapen transition-property till ett lämpligt värde som motsvarar de ändringar du vill animera vid hovring.
  2. Specificera transition-duration för att styra hur länge övergången ska pågå (i detta fall 3000ms).
  3. Använd egenskapen transition-delay för att införa en fördröjning innan övergången startar efter att användaren hovrar över elementet (sätt den till 200ms).
  4. Tillämpa tidsfunktionen cubic-bezier(0.165, 0.84, 0.44, 1) för att finjustera acceleration och inbromsning av övergången.
index.html

index.html

index.css

index.css

copy

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 7
some-alt