თვისება transition-timing-function

თვისება transition-timing-function ადგენს შეუფერხებელი გადასვლის transition ცვლილების სიჩქარეს (აჩქარებას). მაგალითად, თავიდან ნელა, შემდეგ სწრაფად, შემდეგ კვლავ ნელა და ა.შ.

სინტაქსი

სელექტორი {
	transition-timing-function: მნიშვნელობა;
}

მნიშვნელობები

მნიშვნელობა	აღწერა
`ease`	თავიდან ნელა, შემდეგ სწრაფად, ბოლოს კვლავ ნელა.
`ease-in`	იწყება ნელა და თანდათან აჩქარებს.
`ease-out`	იწყება სწრაფად და თანდათან ანელებს.
`ease-in-out`	თავიდან ნელა, შემდეგ სწრაფად, ბოლოს კვლავ ნელა. განსხვავდება ease-ისგან სიჩქარით.
`linear`	ყოველთვის იგივე სიჩქარე.
`step-start`	ანიმაცია არ არის, თვისება მყისიერად იღებს საბოლოო მნიშვნელობას.
`step-end`	ანიმაცია არ არის, თვისება ელოდება იმ დროს, რაც მითითებულია `transition-duraton`-ში, შემდეგ კი მყისიერად იღებს საბოლოო მნიშვნელობას.
`steps`	თვისების მნიშვნელობა იცვლება ნახტომებით.
`cubic-bezier`	ბეზიეს მრუდი, რომელსაც შეუძლია თვითნებური ანიმაციის დაყენება. იხ. ბეზიეს მრუდების გენერატორი.

მნიშვნელობა ნაგულისხმევად: ease.

სხვადასხვა მნიშვნელობების შედარება

მოათავსეთ მაუსი ქვემოთ წარმოდგენილ ბლოკებზე, რომ დაინახოთ ყველა სახის დროის ფუნქციების მუშაობა:

მაგალითი

მოათავსეთ მაუსი ბლოკზე - ის შეუფერხებლად შეცვლის სიგანეს 2 წამში. ვინაიდან დაყენებულია მნიშვნელობა ease-in, ანიმაცია დაიწყება ნელა და თანდათან დააჩქარებს:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	transition-timing-function: ease-in;
	transition-duration: 2s;
	transition-property: width;
	height: 50px;
	width: 100px;
}
#elem:hover {
	width: 400px;
}

ასევე იხილეთ

თვისება transition-duration,
რომელიც ადგენს შეუფერხებელი გადასვლის ხანგრძლივობას
თვისება transition-property,
რომელიც ადგენს თვისების სახელს შეუფერხებელი გადასვლისთვის
თვისება transition-delay,
რომელიც ადგენს დაყოვნებას შეუფერხებელ გადასვლამდე
თვისება transition,
რომელიც არის შეუფერხებელი გადასვლის შემოკლებული ფორმა
თვისება animation,
რომლის დახმარებითაც შესაძლებელია ანიმაციის შექმნა