CSS3 Transition Timing Functions

หายไปนานอีกแล้วครับท่าน แต่ก็ยังไม่ตายจากกัน ยังมีลมหายใจกลับมาพบกันเช่นเคย สั้นบ้างยาวบ้างตามแต่เวลาจะเอื้ออำนวย วันนี้ผมอาจจะมาพูดแค่สั้นๆ กับเรื่อง CSS3 Transitions ในประเด็น Timing Functions

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>).

ตัวอย่าง CSS3 Transition Timing Functions

ดูตัวอย่างแล้ว ก็ View Code ประกอบด้วยนะครับ

ใน Code ของตัวอย่างนั้นมันจะมีทั้งเรื่องของการทำ linear-gradient() ด้วย เมื่อเอาเมาส์ :hover ปุ่มจะสลับสี ซึ่งเราจะเห็นรูปแบบการ Transition ของสี

ในการทดลองดูรูปแบบการทำ Transition แบบต่างๆ ให้ click แบบ toggle นะครับ คือคลิ๊กเปิดแล้ว ถ้าจะเปลี่ยนดูรูปแบบอื่นก็คลิ๊กที่ตัวมันอีกที เพราะผมง่าวเรื่อง Javascript มาก เอาคลาสออกก่อนแอดคลาสใหม่ไม่เป็น -*- ตามตัวอย่างผมใช้ Javascript ช่วยในเรื่อง AddClass removeClass นี่แหละครับ

ที่ผมนำเรื่องนี้กลับมาพูดอีกครั้งเพราะว่าได้ใช้เรื่อง Transitions ของ CSS3 อย่างจริงจังแล้วในตอนนี้ เพราะหลายบริษัทเน้นทำ Web เพื่อ iPad หรือ ดรอยด์ Tablet รุ่นใหม่ๆ ในเมื่อบราวเซอร์สามารถรองรับ CSS3 ได้ก็ใช้ให้เกิดประโยชน์ซะเลย ไม่จำเป็นต้องไปพึ่งพา jQuery ให้หนักเกินไป บางคนเห็นเป็นเรื่อง Javascript ทีไร โยนความรับผิดชอบให้โปรแกรมเมอร์ทุกที แล้วก็มาบ่นอีกว่า อยากได้การเคลื่อนไหวแบบโน้น แบบนั้น

เอาหละครับ วันนี้ผมมาสั้น (แต่ไม่ไม่เล็กนะครับ) ผมขอตัวไปศึกษาเรื่องอื่นก่อนหละครับ

มีความสุขกับการใช้ชีวิตครับ