CSS övergångar

CSS övergångar

CSS-overgångar låter dig mjukt ändra egenskapsvärden under en given tid.

Flytta muspekaren över detta element för att se CSS-overgångseffekten:

CSS

I detta kapitel kommer du att lära dig följande egenskaper:

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

Webbläsarstöd för övergångar

Numrerna i tabellen anger den första webbläsaren som helt stöder egenskapen.

egenskaper 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

Hur använder man CSS-overgångar?

För att skapa en övergångseffekt måste du tydligt specificera två saker:

  • CSS-egenskapen du vill lägga till effekten till
  • Effektens varaktighet

Observera:Om ingen tidsperiod specificeras, kommer övergångseffekten inte att fungera, eftersom standardvärdet är 0.

Följande exempel visar en 100px * 100px röd <div>-element. <div>-elementet har också angivit en övergångseffekt för width-egenskapen, som varar i 2 sekunder:

exempel

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

När värdet för det specificerade CSS-egenskapet (width) ändras, börjar övergångseffekten.

Nu låt oss ange en ny värde för width-egenskapen när muspekaren är över <div>-elementet:

exempel

div:hover {
  width: 300px;
}

Prova själv

Observera, när markören flyttas från elementet, kommer den gradvis att återgå till sin ursprungliga stil.

ändra värden för flera egenskaper

Nedanstående exempel visar hur du lägger till övergångseffekter för både bredd och höjd, bredd är 2 sekunder och höjd är 4 sekunder:

exempel

div {
  transition: bredd 2s, höjd 4s;
}

Prova själv

specificera hastighetskurvan för övergångseffekten

transition-timing-function Egenskapen specificerar hastighetskurvan för övergångseffekten.

transition-timing-function-egenskapen accepterar följande värden:

  • ease - Bestämmer att övergången börjar långsamt, accelererar och slutar långsamt (standard)
  • linjär - Bestämmer att övergången har samma hastighet från början till slut
  • ease-in - Bestämmer att övergången börjar långsammare
  • ease-out - Bestämmer att övergången slutar långsammare
  • ease-in-out - Bestämmer att övergången börjar och slutar långsammare
  • cubic-bezier(n,n,n,n) - Tillåter dig att definiera dina egna värden i en trefaldig Bezier-funktion

Nedanstående exempel visar några olika hastighetskurvor som kan användas:

exempel

#div1 {transition-timing-function: linjär;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Prova själv

fördröj övergångseffekten

transition-delay Egenskapen specificerar fördröjningen för övergångseffekten (i sekunder).

Nedanstående exempel har en fördröjning på 1 sekund innan den startar:

exempel

div {
  transition-delay: 1s;
}

Prova själv

övergång + transformation

Nedanstående exempel visar hur du lägger till övergångseffekter för en transformation:

exempel

div {
  transition: bredd 2s, höjd 2s, transform 2s;
}

Prova själv

mer övergångsexempel

Du kan specificera CSS-overgångsegenskaper en efter en, såsom följande:

exempel

div {
  transition-property: bredd;
  transition-duration: 2s;
  transition-timing-function: linjär;
  transition-delay: 1s;
}

Prova själv

eller använd kortformad transition egenskaper:

exempel

div {
  transition: bredd 2s linjär 1s;
}

Prova själv

CSS-overgångsegenskaper

Nedanstående tabell visar alla CSS-overgångsegenskaper:

egenskaper beskrivning
transition Kortformad egenskap som används för att sätta de fyra övergångsattributen till en enda egenskap.
transition-delay Definiera fördröjningen för övergångseffekten i sekunder.
transition-duration Definiera hur lång tid övergångseffekten ska vara i sekunder eller millisekunder.
transition-property Definiera namnet på CSS-attribut som övergångseffekten riktar sig mot.
transition-timing-function Definiera hastighetskurvan för övergångseffekten.