Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Utfordring: Implementere CSS-animasjon | Avanserte CSS-animasjoner
Avanserte CSS-teknikker

bookUtfordring: Implementere CSS-animasjon

Oppgave

Forbedre det visuelle uttrykket til autorisasjonsskjemaet ved å legge til en animasjon på "Logg inn"-knappen. Følg disse trinnene:

  1. Angi riktig verdi for animation-name-egenskapen, ved å bruke de forhåndsdefinerte tilstandsforandringene definert i @keyframes-regelen med navnet colorChange.
  2. Sett tidsfunksjonen til linear for å sikre jevn hastighet gjennom hele animasjonen.
  3. Definer en varighet for animasjonen på 6000ms.
  4. Konfigurer animasjonen til å gjentas infinite ganger for en kontinuerlig effekt.
index.html

index.html

index.css

index.css

copy
  1. Angi navnet på @keyframes-regelen som verdien for animation-name-egenskapen.
  2. Spesifiser linear som verdien for animation-timing-function-egenskapen for å sikre jevn hastighet.
  3. Sett animation-duration-egenskapen til 6000ms for å bestemme varigheten på animasjonen.
  4. Bruk infinite som verdien for animation-iteration-count-egenskapen for å gjenta animasjonen uendelig.
index.html

index.html

index.css

index.css

copy

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 4. Kapittel 6

Spør AI

expand

Spør AI

ChatGPT

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

bookUtfordring: 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:

  1. Angi riktig verdi for animation-name-egenskapen, ved å bruke de forhåndsdefinerte tilstandsforandringene definert i @keyframes-regelen med navnet colorChange.
  2. Sett tidsfunksjonen til linear for å sikre jevn hastighet gjennom hele animasjonen.
  3. Definer en varighet for animasjonen på 6000ms.
  4. Konfigurer animasjonen til å gjentas infinite ganger for en kontinuerlig effekt.
index.html

index.html

index.css

index.css

copy
  1. Angi navnet på @keyframes-regelen som verdien for animation-name-egenskapen.
  2. Spesifiser linear som verdien for animation-timing-function-egenskapen for å sikre jevn hastighet.
  3. Sett animation-duration-egenskapen til 6000ms for å bestemme varigheten på animasjonen.
  4. Bruk infinite som verdien for animation-iteration-count-egenskapen for å gjenta animasjonen uendelig.
index.html

index.html

index.css

index.css

copy

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 4. Kapittel 6
some-alt