CSS overgang

CSS overgang

CSS-overgange lader dig jævnt ændre attributværdier inden for en given tidsramme.

Placer musen på dette element for at se CSS-overgangseffekten:

CSS

I dette kapitel vil du lære følgende egenskaber:

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Browserunderstøttelse af overgange

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter dette attribut.

egenskab Chrome IE Firefox Safari Opera
transition 26.0 10.0 16.0 6.1 12.1
transition-delay 26.0 10.0 16.0 6.1 12.1
transition-duration 26.0 10.0 16.0 6.1 12.1
transition-property 26.0 10.0 16.0 6.1 12.1
transition-timing-function 26.0 10.0 16.0 6.1 12.1

Hvordan bruger man CSS-overgange?

For at oprette en overgangseffekt skal du tydeligt specificere to ting:

  • Den CSS-attribut, du vil tilføje effekten til
  • Varigheden af effekten

Bemærk:Hvis varigheden af overgangen ikke er specificeret, vil overgangseffekten ikke fungere, da standardværdien er 0.

Følgende eksempel viser en 100px * 100px rød <div>-element. <div>-elementet har også specificeret en overgangseffekt for width-attributten, som varer 2 sekunder:

eksempel

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

Når værdien for den specificerede CSS-attribut (width) ændres, vil overgangseffekten begynde.

Lad os nu specificere et nyt værdi for width-attributten, når musen hæves over <div>-elementet:

eksempel

div:hover {
  width: 300px;
}

Prøv det selv

Bemærk, når markøren flyttes væk fra elementet, vil den gradvist returnere til sin oprindelige stil.

Ændre flere egenskabsværdier

Følgende eksempel tilføjer overgangseffekter til både bredde og højde egenskaber, bredde er 2 sekunder, højde er 4 sekunder:

eksempel

div {
  transition: bredde 2s, højde 4s;
}

Prøv det selv

Angiv hastighedskurven for overgang

transition-timing-function Egenskaben definerer hastighedskurven for overgangseffekten.

transition-tidslinje-egenskaben kan acceptere følgende værdier:

  • ease - Bestemmer en overgangseffekt, hvor den begynder langsomt, accelererer, og slutter langsomt (standard)
  • lineær - Bestemmer en overgangseffekt, hvor hastigheden er konstant fra begyndelse til afslutning
  • ease-in - Bestemmer en overgangseffekt, hvor begyndelsen er langsom
  • ease-out - Bestemmer en overgangseffekt, hvor afslutningen er langsom
  • ease-in-out - Bestemmer en overgangseffekt, hvor begyndelsen og afslutningen er langsomme
  • cubic-bezier(n,n,n,n) - Tillader dig at definere dine egne værdier i tredje Bézier-funktion

Følgende eksempel viser nogle af de forskellige hastighedskurver, der kan bruges:

eksempel

#div1 {transition-tidslinje: lineær;}
#div2 {transition-tidslinje: let;}
#div3 {transition-tidslinje: let-ind;}
#div4 {transition-tidslinje: let-ud;}
#div5 {transition-tidslinje: let-ind-ud;}

Prøv det selv

Forsink overgangseffekten

transition-delay Egenskaben definerer forsinkelsen for overgangseffekten (i sekunder).

Følgende eksempel har en forsinkelse på 1 sekund før start:

eksempel

div {
  transition-forsinkelse: 1s;
}

Prøv det selv

Overgang + Konvertering

Følgende eksempel tilføjer en overgangseffekt til en konvertering:

eksempel

div {
  transition: bredde 2s, højde 2s, transform 2s;
}

Prøv det selv

Flere overgangseksempler

Du kan angive CSS-overgangsegenskaber en efter en, som vist herunder:

eksempel

div {
  transition-ejendom: bredde;
  transition-varighed: 2s;
  transition-tidslinje: lineær;
  transition-forsinkelse: 1s;
}

Prøv det selv

eller brug forkortet transition egenskab:

eksempel

div {
  transition: bredde 2s lineær 1s;
}

Prøv det selv

CSS-overgangsegenskaber

Følgende tabel viser alle CSS-overgangsegenskaber:

egenskab beskrivelse
transition Kortfattet egenskab, der bruges til at sætte fire overgangsegenskaber til én enkelt egenskab.
transition-delay Definerer forsinkelsen for overgangseffekten i sekunder.
transition-duration Definerer hvor lang tid overgangseffekten skal vare i sekunder eller millisekunder.
transition-property Definerer navnet på det CSS-egenskab, der overgår.
transition-timing-function Definerer hastighedskurven for overgangseffekten.