ปกติเราเขียนเว็บก็น่าจะคุ้นเคยกับ css เป็นอย่างดีกับการนำใช้เพิ่มความสวยงามให้กับหน้าเว็บ แต่รู้มั้ยว่า css นั้นสามารถนำมาใช้ทำ animation ได้ด้วย วันนี้เราจะมาลองทำให้ดูกันว่า css animation นั้นใช้งานยังไงเผื่อจะเอาไปต่อยอดเป็นไอเดียปรับใช้ในเว็บของตัวเองกันได้ งั้นเราไปดูพร้อมกันทีละขั้นตอนได้เลย
มาเตรียมอุปกรณ์กันก่อน
ก่อนที่จะลองทำอนิเมชั่นให้อะไรขยับ เราก็ต้องมีสิ่งที่จะให้มันขยับก่อนโดยสร้างไฟล์ html ขึ้นมา และเราจะใช้เจ้าไดโนเสาร์มาเป็นเหยื่อในการเล่นของเรา (จะขอข้ามการเขียน css แบบปกติ)
<!DOCTYPE html> <html> <head> <style> .dino { background-image: url("b2d.png"); border-radius: 50px; background-size: contain; width: 100px; height: 100px; background-color: slateblue; position: absolute; } </style> </head> <body> <div class = "dino"></div> </body> </html>
จากโค้ดด้านบนจะได้ผลลัพธ์ออกมาเป็นแบบนี้
มาเริ่มทำกันเลย
สิ่งที่เราจะใช้ในการทำอนิเมชั่นก็คือ @keyframes ซึ่ง @keyframes นั้นมีกฎที่ว่า style ของelement ในปัจจุบันจะเปลี่ยนไปตามที่เขียนไว้ใน @keyframes
เราจะมาลองให้ไดโนเสาร์เคลื่อนที่จากซ้ายไปขวากันก่อน โดยกำหนด @keyframes ขึ้นมา1ตัวใน tag <style> ให้ชื่อว่า move และให้เคลื่อนที่จากทางซ้ายไปทางขวาในระยะ 120px
@keyframes move { 0% { left: 0px; } 100% { left: 120px; } }
และในcss property ของ class dino จะต้องระบุชื่อของ animation และใส่ระยะเวลาของ animation เป็น 3 วินาที
animation-name: move; animation-duration: 3s;
เสร็จแล้วก็จะได้ผลดังนี้
See the Pen
dyoQNxm by PacharaC (@b2dpcr)
on CodePen.
จะเห็นว่าการเคลื่อนไหวของไดโนเสาร์มันดูแข็งไปนิดเราเลยจะเพิ่มอนิเมชั่นกลิ้
งเข้าไป ด้วยการเพิ่ม @keyframe ขึ้นมาอีกตัวชื่อว่า spin
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
แล้วเพิ่มanimation-name spin เข้าไป
animation-name: move, spin;
เท่านี้ไดโนเสาร์ก็กลิ้งได้แล้ว
See the Pen
gOpQgjd by PacharaC (@b2dpcr)
on CodePen.
นอกจากการเปลี่ยนตำแหน่งแล้วยังสามารถเปลี่ยนสีได้ด้วย
@keyframes move { 0% { background-color: slateblue; left: 0px; } 100% { background-color: springgreen; left: 120px; } }
จากตัวอย่างก่อนหน้าจะเห็นว่า animation ของไดโนเสาร์นั้นจะเร็วในช่วงแรกและจะค่อยช้าลง เนื่องจากนี่เป็นรูปแบบมาตรฐานหากเราไม่กำหนดไว้ หากเราต้องการให้การ animation คงที่ตลอดให้เพิ่มcss property ในclass dino ว่า
animation-timing-function: linear;
animation ก็จะสมูทขึ้น
มาถึงตรงนี้แล้วทุกคนก็สามารถที่จะทำ animation ขั้นพื้นฐานด้วยภาษา css ได้ระดับหนึ่งแล้ว แต่นี่ยังไม่ใช่ความสามารถทั้งหมดในการทำ animation ของ css ยังมีคำสั่งที่ยังไม่ได้กล่าวถึงอีกเช่น animation-direction: alternate; จะทำ animation ทั้งหมดอีกครั้งในทิศตรงข้าม animation-iteration-count: infinite; จะทำ animation ทั้งหมดซ้ำไปเรื่อยๆ หรือ animation-delay: 5s; เพื่อเซทดีเลย์ก่อนจะทำ animation และอื่นๆ
Extra!!
สำหรับใครที่อยากลองทำเพิ่มเติมแต่ไม่รู้ว่าจะทำออกมาในรูปแบบไหนดี เรามีโจทย์ให้ลองทำ animation ประมาณแบบด้านล่างนี้ โดยมีเฉลยให้ด้วย! (คำสั่งที่จำเป็นมีในบทความทั้งหมด และห้ามแอบดูก่อนนะ!)
//วิธีดาวโหลดให้เข้าลิ้งค์>>กดคลิ๊กขวา>>กด save as