Utfordring: Implementere CSS-animasjon
Oppgave
Forbedre det visuelle uttrykket til autorisasjonsskjemaet ved å legge til en animasjon på "Logg inn"-knappen. Følg disse trinnene:
- Angi riktig verdi for
animation-name
-egenskapen, ved å bruke de forhåndsdefinerte tilstandsforandringene definert i@keyframes
-regelen med navnetcolorChange
. - Sett tidsfunksjonen til
linear
for å sikre jevn hastighet gjennom hele animasjonen. - Definer en varighet for animasjonen på
6000ms
. - Konfigurer animasjonen til å gjentas
infinite
ganger for en kontinuerlig effekt.
index.html
index.css
- Angi navnet på
@keyframes
-regelen som verdien foranimation-name
-egenskapen. - Spesifiser
linear
som verdien foranimation-timing-function
-egenskapen for å sikre jevn hastighet. - Sett
animation-duration
-egenskapen til6000ms
for å bestemme varigheten på animasjonen. - Bruk
infinite
som verdien foranimation-iteration-count
-egenskapen for å gjenta animasjonen uendelig.
index.html
index.css
Alt var klart?
Takk for tilbakemeldingene dine!
Seksjon 4. Kapittel 6
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Awesome!
Completion rate improved to 2.04
Utfordring: Implementere CSS-animasjon
Sveip for å vise menyen
Oppgave
Forbedre det visuelle uttrykket til autorisasjonsskjemaet ved å legge til en animasjon på "Logg inn"-knappen. Følg disse trinnene:
- Angi riktig verdi for
animation-name
-egenskapen, ved å bruke de forhåndsdefinerte tilstandsforandringene definert i@keyframes
-regelen med navnetcolorChange
. - Sett tidsfunksjonen til
linear
for å sikre jevn hastighet gjennom hele animasjonen. - Definer en varighet for animasjonen på
6000ms
. - Konfigurer animasjonen til å gjentas
infinite
ganger for en kontinuerlig effekt.
index.html
index.css
- Angi navnet på
@keyframes
-regelen som verdien foranimation-name
-egenskapen. - Spesifiser
linear
som verdien foranimation-timing-function
-egenskapen for å sikre jevn hastighet. - Sett
animation-duration
-egenskapen til6000ms
for å bestemme varigheten på animasjonen. - Bruk
infinite
som verdien foranimation-iteration-count
-egenskapen for å gjenta animasjonen uendelig.
index.html
index.css
Alt var klart?
Takk for tilbakemeldingene dine!
Seksjon 4. Kapittel 6