ปกติเราเขียนเว็บก็น่าจะคุ้นเคยกับ 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;
จะเห็นว่าการเคลื่อนไหวของไดโนเสาร์มันดูแข็งไปนิดเราเลยจะเพิ่มอนิเมชั่นกลิ้งเข้าไป ด้วยการเพิ่ม @keyframe ขึ้นมาอีกตัวชื่อว่า spin
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}แล้วเพิ่ม animation-name spin เข้าไป
animation-name: move, spin;เท่านี้ไดโนเสาร์ก็กลิ้งได้แล้ว นอกจากการเปลี่ยนตำแหน่งแล้วยังสามารถเปลี่ยนสีได้ด้วย
@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 ขั้นพื้นฐานด้วยภาษา css ได้ระดับหนึ่งแล้ว แต่นี่ยังไม่ใช่ความสามารถทั้งหมดในการทำ animation ของ css ยังมีคำสั่งที่ยังไม่ได้กล่าวถึงอีกเช่น animation-direction: alternate; จะทำ animation ทั้งหมดอีกครั้งในทิศตรงข้าม animation-iteration-count: infinite; จะทำ animation ทั้งหมดซ้ำไปเรื่อยๆ หรือ animation-delay: 5s; เพื่อเซทดีเลย์ก่อนจะทำ animation และอื่นๆ
Extra!!
สำหรับใครที่อยากลองทำเพิ่มเติมแต่ไม่รู้ว่าจะทำออกมาในรูปแบบไหนดี เรามีโจทย์ให้ลองทำ animation ประมาณแบบด้านล่างนี้ โดยมีเฉลยให้ด้วย! (คำสั่งที่จำเป็นมีในบทความทั้งหมด และห้ามแอบดูก่อนนะ!)
//วิธีดาวโหลดให้เข้าลิ้งค์>>กดคลิ๊กขวา>>กด save as
