css transform

Tag: css transform

ทำความเข้าใจ CSS3 Animations เบื้องต้น

CSS3 Animation

ไม่ว่าจะช้า หรือเร็ว สุดท้ายแล้ว CSS Designer ส่วนใหญ่ก็คงต้องเดินไปถึงจุดนั้นอยู่ดี จุดนั้นในที่นี้ ผมหมายถึงเรื่องของ CSS3 และการทำ Animation ตามท้องเรื่อง เว้นเสียแต่ว่า “ไม่มีความจำเป็นใดใด” ที่ต้องทำ เอาเป็นว่านำเสนอไว้เผื่อเกิดความจำเป็นก็แล้วกันนะครับ แม้ว่ามันจะ ขาดๆ เกินๆ บ้าๆ บวมๆ ก็ตาม

ในบทความนี้ ผมขอพูดถึงเรื่อง พื้นๆ เพื่อเริ่มสร้างความเข้าใจกันไปก่อนนะครับ

คำสั่งพื้นฐานของ Animation ใน CSS3 มีดังนี้

  • animation-name คือ การตั้งชื่อให้กับรูปแบบการแสดงการเคลื่อนไหว
  • animation-duration คือ ระยะเวลาของการเคลื่อนไหว จาก ต้นทาง ไป ปลายทาง
  • animation-timing-function คือ รูปแบบการเล่นใน 1 รอบของการเคลื่อนไหวของ keyframe
  • animation-iteration-count คือ การทำซ้ำ เช่น จะให้ทำกี่รอบ หรือ infinite คือ วนไม่หยุด
  • animation-direction คือ การสั่งทิศทางการเล่น เช่น จาก 1 ถึง 10 หรือจะให้เล่นถอยหลัง จาก 10 มา 1
  • animation-delay คือ จะให้เริ่มทำทันที หรือ ดีเลย์ ตามเวลาที่กำหนด เช่น ถ้าเรากดปุ่มแล้วต้องการให้ animation ที่เราสั่งงานเริ่มเล่นเมื่อเวลาผ่านไปหลังจากกดปุ่ม 2 วินาที เราสามารถกำหนดได้ใน animation-delay โดยค่าเริ่มต้นคือ 0 ซึ่งเป็นการสั่งให้เล่นทันที
  • animation คือ shorthand property หรือการเขียนแบบย่อ โดยการใส่ค่าควรเรียงลำดับจาก <animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>

จาก CSS3 Transforms ถึง CSS Motion Editor Designer

ภาพตัวอย่างการ transform ของ CSS3

ย้อนกลับไปเมื่อ 3-4 ปีที่ผ่านมา นับจากปีปัจจุบัน (2553) คำว่า CSS Designer เพิ่งถือกำเนิดขึ้นใจเมืองไทย เวลาผ่านล่วงไป สาม สี่ปี ก็จริง เป็น สาม สี่ปีที่ไม่ค่อยได้เดินไปไหนกัน อย่างไรก็ตาม เท่าที่ผมสังเกต บ้านเราถือว่าเดินตามเรื่อง CSS มาไกลกันอักโข แต่ก็ยังไม่ถึงขั้นที่เรียกว่าตามทัน

ในระดับบริษัท ห้างร้าน เริ่มมี แผนกเขียน CSS HTML แยกออกจาก Interface Design อื่นๆ แต่สำหรับบางบริษัท ยังทำแบบ All-in-one ก็เป็นอันเข้าใจว่า อาจจะด้วยความเบี้ยน้อยแต่หอยใหญ่ ก็ว่ากันไป

มองย้อนกลับไปข้างหลังแล้ว เรามามองโค้งแบบลูกยิงไกลของ โรนัลโด้ บ้าง ว่า ในอนาคตอันใกล้ ใกล้ นี้ ในเรื่องราวของการเขียน CSS HTML มันจะแปลกแปร่งออกไปจากเผ่าพันธุ์เดิมดั้ง ดั่งเคยเป็นมายังไงบ้าง

Back to Top

Social Share Buttons and Icons powered by Ultimatelysocial