Timing Functions ของ CSS3 นั่นก็คือ Function ที่เอาไว้คอยกำหนดรูปแบบการ “เปลี่ยนผ่าน” จากจุดหนึ่งไปยังจุดหนึ่ง นั่นเอง ซึ่งมีทั้งหมด 9 แบบ สำหรับคนที่ยังไม่เคยผ่านตาเรื่อง CSS Transitions ให้กลับไปอ่านเรื่อง ทำความเข้าใจ CSS3 Transitions กันก่อนนะครับ สำหรับคนที่ผ่านตามาบ้างแล้วก็ลุยต่อเรื่องของ Timing Functions กันต่อเลย

Timing Functions ของ CSS

• ease
• linear
• ease-in
• ease-out
• ease-in-out
• step-start
• step-end
• steps([, [ start | end ] ]?)
• cubic-bezier(<number>,<number>,<number>,<number>)

แต่เราสามารถนำรูปแบบที่ 9 หรือแบบ cubic-bezier(<number>,<number>,<number>,<number>) มาเขียนรูปแบบเฉพาะตัวของเราได้ นั่นก็เพราะว่า Functions ทั้ง 5 แบบแรกนั้นกำเนิดมาจากการเขียน cubic-bezier(x1,y1,x2,y2) (อ่านการเคลื่อนที่แบบโค้งในลูกบาศก์ จาก W3C) นั่นเอง ตามนี้

ease

มีค่าเท่ากับการเขียน cubic-bezier(0.25, 0.1, 0.25,1.0)

linear

มีค่าเท่ากับการเขียน cubic-bezier(0.0, 0.0, 1.0,1.0)

ease-in

มีค่าเท่ากับการเขียน cubic-bezier(0.42, 0, 1.0,1.0)

ease-out

มีค่าเท่ากับการเขียน cubic-bezier(0, 0, 0.58, 1.0)

ease-in-out

มีค่าเท่ากับการเขียน cubic-bezier(0.42, 0, 0.58,1.0)

step-start

มีค่าเท่ากับการเขียน steps(1, start)

step-end

มีค่าเท่ากับการเขียน steps(1, end).

steps

มีค่าเท่ากับการเขียน steps(<number>,<number>).