⌘K

Egenskaben transition-timing-function

Egenskaben transition-timing-function indstiller hastigheden for ændring (acceleration) af den glid overgang transition. For eksempel, først langsomt, derefter hurtigt, derefter langsomt osv.

Syntaks

cssselektor {
  transition-timing-function: værdi;
}

Værdier

Værdi Beskrivelse
ease Først langsomt, derefter hurtigt, i slutningen igen langsomt.
ease-in Begynder langsomt og accelererer gradvist.
ease-out Begynder hurtigt og stopper gradvist.
ease-in-out Først langsomt, derefter hurtigt, i slutningen igen langsomt. Forskellen fra ease er hastigheden.
linear Altid den samme hastighed.
step-start Ingen animation, egenskaben antager straks den endelige værdi.
step-end Ingen animation, egenskaben venter i den tid, der er angivet i transition-duraton, og antager derefter øjeblikkeligt den endelige værdi.
steps Egenskabens værdi ændres med spring.
cubic-bezier En Bezier-kurve, der kan definere en vilkårlig animation. Se generatoren af Bezier-kurver.

Standardværdi: ease.

Sammenligning af forskellige værdier

Før musen over nedenstående blokke for at se alle typer af tidsfunktioner i aktion:

Eksempel

Før musen over blokken - den vil glidende ændre sin bredde på 2 sekunder. Da værdien ease-in er indstillet, vil animationen starte langsomt og gradvist accelerere: 

html<div id="elem"></div>
css#elem {
  border: 1px solid black;
  transition-timing-function: ease-in;
  transition-duration: 2s;
  transition-property: width;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

Se også

BackEgenskaben transition-propertyNextEgenskaben transition