Transition

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

Hover me

Roughly

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

Smoothly

https://gist.github.com/NSLog0/ece084a87c36b2e8eb04d656453b93e9#file-box1-css

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

Hove me

Hove me

Multiple setting

https://gist.github.com/NSLog0/ece084a87c36b2e8eb04d656453b93e9#file-box3-css

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

Delay

https://gist.github.com/NSLog0/ece084a87c36b2e8eb04d656453b93e9#file-box4-css

เราสามารถทำให้การ 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)

https://gist.github.com/NSLog0/ece084a87c36b2e8eb04d656453b93e9#file-trans-box1-css

เริ่มแรกตั่งค่าให้ตำแหน่งของแท็ก 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

https://gist.github.com/NSLog0/ece084a87c36b2e8eb04d656453b93e9#file-rotate1-css

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

Hove me

RotateY

RotateX

rotate X or Y

https://gist.github.com/NSLog0/ece084a87c36b2e8eb04d656453b93e9#file-rotatexy-css

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

scale

https://gist.github.com/NSLog0/ece084a87c36b2e8eb04d656453b93e9#file-scale-css

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

Scale

Skew1

Skew2

skew

https://gist.github.com/NSLog0/ece084a87c36b2e8eb04d656453b93e9#file-skew-css

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

skew X or Y

https://gist.github.com/NSLog0/ece084a87c36b2e8eb04d656453b93e9#file-skewxy-css

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

Skew1

Skew2

3D Transforms

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

translate3d (x,y,z)

https://gist.github.com/NSLog0/ece084a87c36b2e8eb04d656453b93e9#file-transz-css

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

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

translate3d incorrect setting

https://gist.github.com/NSLog0/ece084a87c36b2e8eb04d656453b93e9#file-transznosetting-css

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

3D methods

https://gist.github.com/NSLog0/ece084a87c36b2e8eb04d656453b93e9#file-tran3dmethod-md

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

Animation

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

@keyframes

https://gist.github.com/NSLog0/ece084a87c36b2e8eb04d656453b93e9#file-bouncing-css

การสร้าง 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 เป็นคำสั่งใช้ในการระบุค่าการ

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

https://gist.github.com/NSLog0/ece084a87c36b2e8eb04d656453b93e9#file-complete-bouncing-css

Animation short hand

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

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

Facebook Comments