Egenskapen transition-timing-function

Egenskapen transition-timing-function setter endringshastigheten (akselerasjonen) til den jevne overgangen transition. For eksempel, først sakte, deretter raskt, deretter sakte osv.

Syntaks

cssvelger {
  transition-timing-function: verdi;
}

Verdier

Verdi	Beskrivelse
`ease`	Først sakte, deretter raskt, til slutt igjen sakte.
`ease-in`	Begynner sakte og akselererer gradvis.
`ease-out`	Begynner raskt og stopper gradvis.
`ease-in-out`	Først sakte, deretter raskt, til slutt igjen sakte. Skiller seg fra ease i hastighet.
`linear`	Alltid samme hastighet.
`step-start`	Ingen animasjon, egenskapen tar umiddelbart den endelige verdien.
`step-end`	Ingen animasjon, egenskapen venter i den tiden satt i `transition-duraton`, og tar deretter øyeblikkelig den endelige verdien.
`steps`	Verdien av egenskapen endres med hopp.
`cubic-bezier`	Bezier-kurve som kan definere vilkårlig animasjon. Se Bezier-kurvegenerator.

Standardverdi: ease.

Sammenligning av ulike verdier

Hold musepekeren over boksene nedenfor for å se alle typer tid-funksjoner i arbeid:

Eksempel

Hold musepekeren over boksen - den vil jevnt endre sin bredde over 2 sekunder. Siden verdien ease-in er satt, vil animasjonen begynne sakte og gradvis akselerere:

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å

egenskapen transition-duration,
som setter varigheten til den jevne overgangen
egenskapen transition-property,
som setter navnet på egenskapen for den jevne overgangen
egenskapen transition-delay,
som setter forsinkelsen før den jevne overgangen
egenskapen transition,
som er en forkortelse for den jevne overgangen
egenskapen animation,
som kan brukes til å lage animasjon