Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer Uitdaging: CSS-Animatie Implementeren | Geavanceerde CSS-Animaties
Geavanceerde CSS-Technieken

bookUitdaging: CSS-Animatie Implementeren

Taak

Verhoog de visuele aantrekkingskracht van het autorisatieformulier door een animatie toe te voegen aan de "Log in"-knop. Volg deze stappen:

  1. Geef de juiste waarde op voor de eigenschap animation-name, gebruikmakend van de vooraf ingestelde statuswijzigingen gedefinieerd in de @keyframes-regel met de naam colorChange.
  2. Stel de tijdsfunctie in op linear voor een consistente snelheid gedurende de animatie.
  3. Definieer een duur van 6000ms voor de animatie.
  4. Stel de animatie in om infinite keren te herhalen voor een continu effect.
index.html

index.html

index.css

index.css

copy
  1. Wijs de naam van de @keyframes-regel toe als waarde voor de eigenschap animation-name.
  2. Specificeer linear als waarde voor de eigenschap animation-timing-function om een gelijkmatige snelheid te garanderen.
  3. Stel de eigenschap animation-duration in op 6000ms om de duur van de animatie te bepalen.
  4. Gebruik infinite als waarde voor de eigenschap animation-iteration-count om de animatie oneindig te herhalen.
index.html

index.html

index.css

index.css

copy

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 4. Hoofdstuk 6

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Awesome!

Completion rate improved to 2.04

bookUitdaging: CSS-Animatie Implementeren

Veeg om het menu te tonen

Taak

Verhoog de visuele aantrekkingskracht van het autorisatieformulier door een animatie toe te voegen aan de "Log in"-knop. Volg deze stappen:

  1. Geef de juiste waarde op voor de eigenschap animation-name, gebruikmakend van de vooraf ingestelde statuswijzigingen gedefinieerd in de @keyframes-regel met de naam colorChange.
  2. Stel de tijdsfunctie in op linear voor een consistente snelheid gedurende de animatie.
  3. Definieer een duur van 6000ms voor de animatie.
  4. Stel de animatie in om infinite keren te herhalen voor een continu effect.
index.html

index.html

index.css

index.css

copy
  1. Wijs de naam van de @keyframes-regel toe als waarde voor de eigenschap animation-name.
  2. Specificeer linear als waarde voor de eigenschap animation-timing-function om een gelijkmatige snelheid te garanderen.
  3. Stel de eigenschap animation-duration in op 6000ms om de duur van de animatie te bepalen.
  4. Gebruik infinite als waarde voor de eigenschap animation-iteration-count om de animatie oneindig te herhalen.
index.html

index.html

index.css

index.css

copy

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 4. Hoofdstuk 6
some-alt