Właściwość transition-timing-function

Właściwość transition-timing-function ustawia prędkość zmiany (przyspieszenie) płynnego przejścia transition. Na przykład, najpierw wolno, potem szybko, potem wolno i tak dalej.

Składnia

cssselektor {
  transition-timing-function: wartość;
}

Wartości

Wartość	Opis
`ease`	Najpierw wolno, potem szybko, na końcu znowu wolno.
`ease-in`	Zaczyna się wolno i stopniowo przyspiesza.
`ease-out`	Zaczyna się szybko i stopniowo zwalnia.
`ease-in-out`	Najpierw wolno, potem szybko, na końcu znowu wolno. Różni się od ease prędkością.
`linear`	Zawsze taka sama prędkość.
`step-start`	Brak animacji, właściwość natychmiast przyjmuje końcową wartość.
`step-end`	Brak animacji, właściwość czeka czas, ustawiony w `transition-duraton`, a następnie natychmiast przyjmuje końcową wartość.
`steps`	Wartość właściwości zmienia się skokowo.
`cubic-bezier`	Krzywa Beziera, która może określać dowolną animację. Zobacz generator krzywych Beziera.

Wartość domyślna: ease.

Porównanie różnych wartości

Najedź myszką na przedstawione poniżej bloki, aby zobaczyć działanie wszystkich rodzajów funkcji czasowych:

Przykład

Najedź myszką na blok - płynnie zmieni on swoją szerokość w ciągu 2 sekund. Ponieważ ustawiono wartość ease-in, animacja zacznie się powoli i będzie stopniowo przyspieszać:

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;
}

Результат:

Zobacz też

właściwość transition-duration,
która ustawia czas trwania płynnego przejścia
właściwość transition-property,
która ustawia nazwę właściwości dla płynnego przejścia
właściwość transition-delay,
która ustawia opóźnienie przed płynnym przejściem
właściwość transition,
która jest skrótem dla płynnego przejścia
właściwość animation,
za pomocą której można zrobić animację