Уласцівасць transition-timing-function

Уласцівасць transition-timing-function ўстанаўлівае хуткасць змянення (паскарэнне) плаўнага пераходу transition. Напрыклад, спачатку павольна, потым хутка, потым павольна і г.д.

Сінтаксіс

cssселектар {
  transition-timing-function: значэнне;
}

Значэнні

Значэнне па змаўчанні: ease.

Параўнанне розных значэнняў

Навядзіце мышэй на прадстаўленыя ніжэй блокі, каб убачыць працу ўсіх відаў часовых функцый:

Прыклад

Навядзіце мышэй на блок - ён плаўна зменіць свойую шырыню за 2 секунды. Так як устаноўлена значэнне ease-in, то анімацыя пачнецца павольна і будзе паступова паскарацца:

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

Результат:

Глядзіце таксама