คุณสมบัติ transition-timing-function

คุณสมบัติ transition-timing-function กำหนดความเร็วของการเปลี่ยนแปลง (ความเร่ง) ของการเปลี่ยนผ่านแบบลื่นไหล transition ตัวอย่างเช่น เริ่มแรกช้า จากนั้นเร็ว จากนั้นช้า เป็นต้น

ไวยากรณ์

selector {
	transition-timing-function: ค่า;
}

ค่า

ค่า	คำอธิบาย
`ease`	เริ่มช้า จากนั้นเร็ว และช้าอีกครั้งในตอนท้าย
`ease-in`	เริ่มต้นช้าและค่อยๆ เร่งความเร็วขึ้น
`ease-out`	เริ่มต้นเร็วและค่อยๆ ช้าลงจนหยุด
`ease-in-out`	เริ่มแรกช้า จากนั้นเร็ว และช้าอีกครั้งในตอนท้าย แตกต่างจาก ease ในด้านความเร็ว
`linear`	มีความเร็วเท่ากันตลอด
`step-start`	ไม่มีแอนิเมชัน คุณสมบัติรับค่าสุดท้ายทันที
`step-end`	ไม่มีแอนิเมชัน คุณสมบัตินั้นรอเวลา ที่กำหนดไว้ใน `transition-duraton` จากนั้นรับค่าสุดท้ายทันทีทันใด
`steps`	ค่าของคุณสมบัติเปลี่ยนแปลงเป็นขั้นเป็นตอน
`cubic-bezier`	เส้นโค้ง Bezier ที่สามารถกำหนดแอนิเมชันตามต้องการได้ ดูที่ เครื่องสร้างเส้นโค้ง 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
ซึ่งใช้สร้างแอนิเมชันได้