Velge 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.css
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.css
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
.
Takk for tilbakemeldingene dine!
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
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
Velge 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.css
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.css
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
.
Takk for tilbakemeldingene dine!