Uitdaging: 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:
- Geef de juiste waarde op voor de eigenschap
animation-name, gebruikmakend van de vooraf ingestelde statuswijzigingen gedefinieerd in de@keyframes-regel met de naamcolorChange. - Stel de tijdsfunctie in op
linearvoor een consistente snelheid gedurende de animatie. - Definieer een duur van
6000msvoor de animatie. - Stel de animatie in om
infinitekeren te herhalen voor een continu effect.
index.html
index.css
- Wijs de naam van de
@keyframes-regel toe als waarde voor de eigenschapanimation-name. - Specificeer
linearals waarde voor de eigenschapanimation-timing-functionom een gelijkmatige snelheid te garanderen. - Stel de eigenschap
animation-durationin op6000msom de duur van de animatie te bepalen. - Gebruik
infiniteals waarde voor de eigenschapanimation-iteration-countom de animatie oneindig te herhalen.
index.html
index.css
Was alles duidelijk?
Bedankt voor je feedback!
Sectie 4. Hoofdstuk 6
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Suggested prompts:
What should the CSS code look like for the "Log in" button animation?
Can you explain how the @keyframes rule named colorChange should be defined?
Where exactly should I add these animation properties in my CSS?
Awesome!
Completion rate improved to 2.04
Uitdaging: 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:
- Geef de juiste waarde op voor de eigenschap
animation-name, gebruikmakend van de vooraf ingestelde statuswijzigingen gedefinieerd in de@keyframes-regel met de naamcolorChange. - Stel de tijdsfunctie in op
linearvoor een consistente snelheid gedurende de animatie. - Definieer een duur van
6000msvoor de animatie. - Stel de animatie in om
infinitekeren te herhalen voor een continu effect.
index.html
index.css
- Wijs de naam van de
@keyframes-regel toe als waarde voor de eigenschapanimation-name. - Specificeer
linearals waarde voor de eigenschapanimation-timing-functionom een gelijkmatige snelheid te garanderen. - Stel de eigenschap
animation-durationin op6000msom de duur van de animatie te bepalen. - Gebruik
infiniteals waarde voor de eigenschapanimation-iteration-countom de animatie oneindig te herhalen.
index.html
index.css
Was alles duidelijk?
Bedankt voor je feedback!
Sectie 4. Hoofdstuk 6