Transition

Transition มีหน้าที่ทำให้การเปลี่ยนค่า Property ของ Element ต่างๆ ให้ Smooth (นุ่มนวล) ให้เหมือนกับมีอนิเมชั่นอยู่ในการทำงานของ Element

Hover me

Roughly

ถ้าหากเราไม่ตั้งค่า transition ใดๆ เลยการทำงานมันก็รวดเร็วและไม่สวยงามแบบตัวอย่าง เพราะไม่มีตัวกลางในการกำหนดเรื่องของการ Render

Smoothly

หากเราต้องการให้เว็บมีการ Render ที่สวยขึ้นและมีการทำ Animation ให้ดูรื่นขึ้น เราก็จะใช้การเรียกคำสั่งพื้นฐานเบื้องต้น และเมื่อถ้ามีการเปลี่ยนแปลงที่ property ไหน ที่เรากำหนดไว้ HTML ก็จะถูกทำให้เกิด Animation ในการ Render

Hove me

Hove me

Multiple setting

เราสามารถทำให้การวิ่งของ Animation มีผลไม่เท่ากันด้วยการใช้ (,) coma คั่นเพื่อให้มันทำงานต่างกันและกำหนดเวลาเข้าไปให้แต่ละ property ได้  จากตัวอย่างคือสีจะเปลี่ยนช้า แต่ความยาวจะไวกว่า

Delay

เราสามารถทำให้การ Render นั่นมีการ Delay  อีกด้วย ตัวอย่างผมให้ทุก property มีการ Delay ออกไปก่อน 1 วินาที ก่อนจะให้มันเข้าการทำงานแบบปกติ

Hove me

2D Transforms

Transforms 2D เป็นคำสั่งให้เราทำการ translate (เคลื่อนย้าย), rotate (หมุน), scale (ขยาย) และ skew (บิด) โดยที่เรียกว่า 2D ก็เพราะว่ามันเป็นคำสั่งมันมีแต่ให้เราตั่งค่าแกน X,Y เท่านั่น เราจึงเรียกมันว่า 2D เพราะไม่มีแกน Z เข้ามาเกี่ยวข้อง

I was moved here

translate (x, y)

เริ่มแรกตั่งค่าให้ตำแหน่งของแท็ก p อยู่ที่ x,y => 0,0 และผมก็ได้ขยับมันไปอยู่ที่ x,y => 10, 100 เหมือนตัวอย่าง

เพิ่มเติม: การใช้ translate นั่นจะเหมือนกันการทำให้ element เป็น position: absolute และขยับ top/left แต่การใช้ translate จะดีกว่าตรงที่มันใช้การ์จอในการช่วย Render  และขยับตำแหน่งแบบ sub-pixel ไม่เหมือนกัน absolute มันจะขยับแบบ pixel-pixel จะให้การวางตำแหน่งไม่เหมือนกัน ความละเอียดในการวางบนจอภาพจะต่างออกไป ไว้มีโอกาสจะเขียน Benchmark ให้ดูนะครับ แถมถ้าหากใช้ในงาน animation ไม่ควรใช้การขยับ top/left  เพราะมันใช้ CPU ในการวาด element ทำให้เครื่องกระตุกได้และกินเวลานานกว่า translate

rotate

เราจะมาลองเล่นการหมุนกล่องเป็นวงกลมดู ผมใส่คำสั่ง transition เข้าไปด้วยจะได้มีการ Render ที่สมูทเพราะถ้าหากไมมีเราจะไม่สามารถเห็นกล่องหมุนได้

Hove me

RotateY

RotateX

rotate X or Y

ลองมาดูตัวอย่างการทำหมุนเฉพาะ X, Yแกนกันครับ 

scale

เป็นคำสั่งใช้ในการเพิ่มขนาดของ Element ด้วยการคูณ เช่นตัวอย่างคือผมเพิ่มด้วย 2,2 หมายความว่า คูณ width ด้วย 2 และ height ด้วย 2

Scale

Skew1

Skew2

skew

สำหรับ skew เราจะไว้ใช้ในการบิดรูปร่างของ Element 

skew X or Y

นอกจากนี้เรายังสั่งให้มันบิดแค่แกน X, Y ได้ด้วย

Skew1

Skew2

3D Transforms

Transforms 3D จะคล้ายๆ กับ Transforms 2D แต่เราจะมีเพิ่มแกน Z เข้ามาให้เราได้ใช้กัน และมีคำสั่งเพิ่มมาเพื่อให้ทำงาน 3D ได้

translate3d (x,y,z)

จากตัวอย่างผมเอียงกล่องนิดหน่อยเพราะเวลาดูจะได้เห็นภาพชัดขึ้น เพราะถ้าไม่เอียงเวลาขยับแกน Z มันจะเหมือนเราทำ scale แต่เพื่อให้ทุกคนอ่านเข้าใจ ผมเลยต้องเอียง ถ้าใครนิดแกน X,Y,Z ไม่ออกให้ลองเข้าไปดูที่นี่

เพิ่มเติม:  สำหรับการใข้งานฟังก์ชันที่เป็น 3D จะต้องมีการเรียกใช้ฟังก์ชัน perspective เสมอเพื่อทำการ active 3D space  หรือพูดง่ายๆ ว่าสร้างบอร์ดสำหรับให้การใช้งานแกน X, Y, Z ให้รูปแบบ 3D

translate3d incorrect setting

ถ้าไม่มีการกำหนด perspective ให้กับตัว Element เราจะเห็นว่ามันทำงานได้แค่ 2D เท่านั้น

3D methods

สำหรับคำสั่งจะคล้ายๆ กับ 2D  แต่จะเพิ่มการมี Z ต่อท้ายเข้าไปเท่านั่นเอง และมีคำสั่งที่รับเอา 3 ค่าคือ X, Y, Z เข้ามาอีกอันนึง

Animation

Animation เป็นคำสั่งที่ทำให้เราเขียนการทำงานโดยที่ไม่ต้องใข้ JavaScript ช่วยในการทำ Animation แต่อย่างใด หลักๆ ก็จะประกอบไปด้วย keyframes (กำหนดการทำงานของ Animation) และ Animation (สำหรับการเรียกใช้งาน keyframes)

@keyframes

การสร้าง Animation นั่นเราจำเป็นต้องสร้างการเคลื่อนไวของ Animation เราก่อนซึ่งเราจะต้องสร้างด้วยคำสั่ง @keyframes และตามด้วยชื่อไว้สำหรับเรียกใช้งาน ในการกำหนด Timeline ของการทำงานนั่นเราสามารถกำหนดได้ตั่งแต่ 0-100% ว่าต้องการให้แต่ละ Timeline เกิดเหตุการอะไรมัง หรือใช้แค่ from-to สำหรับการทำงานเพียง 2 frams คือ 0% และ 100% เลย

Animation

ในการเรียกใช้ Keyframes นั้นเราจะม่คำสั่งพื้นฐานอยู่สามอย่าง

  • animation-name ไว้สำหรับเรียกชื่อ keyframe ที่เราตั่งไว้ 
  • animation-duration ไว้สำหรับตั้งเพื่อบอกว่า Animation จะมีความยาวนานในการทำงานแค่ไหน ตั่งแต่ 0-100%
  • animation-iteration-count เพื่อบอกให้ CSS รู้ว่าเราจะมีการเล่นซ้ำกี่ครั่งหรือเล่นเรื่อยๆ ก็ได้
  • animation-timing-function เป็นคำสั่งใช้ในการระบุค่าการ

ดั่งนั้นเราจะมาดูตัวอย่างกัน

Animation short hand

ปกติแล้วเรามักจะเจอการเขียนคำสั่ง Animation แบบย่อๆ ซึ่ง และเราสามารถนำ 3 คำสั่งด้านบนมาวางได้แบบนี้ 

animation: slidein 3s ease-in 1s infinite reverse both running;

Facebook Comments