Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Utmaning: Implementera CSS-animation | Avancerade CSS-animationer
Avancerade CSS-tekniker

bookUtmaning: Implementera CSS-animation

Uppgift

Förbättra det visuella intrycket av auktoriseringsformuläret genom att lägga till en animation på knappen "Logga in". Följ dessa steg:

  1. Ange korrekt värde för egenskapen animation-name genom att använda de förinställda tillståndsändringarna som definierats i @keyframes-regeln med namnet colorChange.
  2. Ställ in tidsfunktionen till linear för att säkerställa en jämn hastighet genom hela animationen.
  3. Definiera en varaktighet för animationen till 6000ms.
  4. Konfigurera animationen att upprepas infinite gånger för en kontinuerlig effekt.
index.html

index.html

index.css

index.css

copy
  1. Tilldela namnet på @keyframes-regeln som värde för egenskapen animation-name.
  2. Ange linear som värde för egenskapen animation-timing-function för att säkerställa en jämn hastighet.
  3. Ställ in egenskapen animation-duration till 6000ms för att bestämma animationens varaktighet.
  4. Använd infinite som värde för egenskapen animation-iteration-count för att upprepa animationen obegränsat antal gånger.
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 4. Kapitel 6

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: Implementera CSS-animation

Svep för att visa menyn

Uppgift

Förbättra det visuella intrycket av auktoriseringsformuläret genom att lägga till en animation på knappen "Logga in". Följ dessa steg:

  1. Ange korrekt värde för egenskapen animation-name genom att använda de förinställda tillståndsändringarna som definierats i @keyframes-regeln med namnet colorChange.
  2. Ställ in tidsfunktionen till linear för att säkerställa en jämn hastighet genom hela animationen.
  3. Definiera en varaktighet för animationen till 6000ms.
  4. Konfigurera animationen att upprepas infinite gånger för en kontinuerlig effekt.
index.html

index.html

index.css

index.css

copy
  1. Tilldela namnet på @keyframes-regeln som värde för egenskapen animation-name.
  2. Ange linear som värde för egenskapen animation-timing-function för att säkerställa en jämn hastighet.
  3. Ställ in egenskapen animation-duration till 6000ms för att bestämma animationens varaktighet.
  4. Använd infinite som värde för egenskapen animation-iteration-count för att upprepa animationen obegränsat antal gånger.
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 4. Kapitel 6
some-alt