თვისება 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;
}

Результат:

ასევე იხილეთ