Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Velge Riktige Overgangsegenskaper | Lage Jevne Overganger i CSS
Avanserte CSS-teknikker

bookVelge Riktige Overgangsegenskaper

Vi kan angi hvilken som helst CSS-egenskap som en verdi for transition-property-egenskapen. Dette betyr at vi kan bruke overgangseffekt på enhver egenskap.

transition-property: ... /* any property */

Vi skal arbeide med noen typiske egenskaper som ofte animeres. Egenskapene transition-duration, transition-timing-function og transition-delay forblir alltid uendret. Alle overganger vil reagere på musepekerens hover.

index.html

index.html

index.css

index.css

copy

Flere overgangsegenskaper

Vi kan også bruke verdien all for egenskapen transition-property, noe som betyr at alle egenskaper vil få overgangseffekt.

transition-property: all;

I det følgende eksempelet ønsker vi å legge til overgang på endring av egenskapene background-color, color, font-weight og font-size. Se på filen index.css:

index.html

index.html

index.css

index.css

copy

Hvis vi også trenger å legge til en overgang på flere egenskaper, men ikke på alle, kan vi angi dem som en verdi for transition-property-egenskapen, adskilt med mellomrom. For eksempel:

transition-property: color border height;

Dette betyr at overgangen vil bli brukt på egenskapene color, border og height.

question mark

Hva bestemmer transition-property-egenskapen?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 2

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

Suggested prompts:

Can you explain what each transition property does?

Can you show an example of how transitions look in practice?

What are some common use cases for CSS transitions?

Awesome!

Completion rate improved to 2.04

bookVelge Riktige Overgangsegenskaper

Sveip for å vise menyen

Vi kan angi hvilken som helst CSS-egenskap som en verdi for transition-property-egenskapen. Dette betyr at vi kan bruke overgangseffekt på enhver egenskap.

transition-property: ... /* any property */

Vi skal arbeide med noen typiske egenskaper som ofte animeres. Egenskapene transition-duration, transition-timing-function og transition-delay forblir alltid uendret. Alle overganger vil reagere på musepekerens hover.

index.html

index.html

index.css

index.css

copy

Flere overgangsegenskaper

Vi kan også bruke verdien all for egenskapen transition-property, noe som betyr at alle egenskaper vil få overgangseffekt.

transition-property: all;

I det følgende eksempelet ønsker vi å legge til overgang på endring av egenskapene background-color, color, font-weight og font-size. Se på filen index.css:

index.html

index.html

index.css

index.css

copy

Hvis vi også trenger å legge til en overgang på flere egenskaper, men ikke på alle, kan vi angi dem som en verdi for transition-property-egenskapen, adskilt med mellomrom. For eksempel:

transition-property: color border height;

Dette betyr at overgangen vil bli brukt på egenskapene color, border og height.

question mark

Hva bestemmer transition-property-egenskapen?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 2
some-alt