วิธีการทำ Animation ด้วย CSS โดยใช้ @keyframe

[salahuding]

หลายคนก็พอจะรู้จัก CSS กันแล้วสำหรับความหมาย CSS เพิ่มเติม https://www.mindphp.com/%E0%B8%84%E0%B8 ... B8%A3.html ซึ่งเราจะรู้แล้วว่า CSS เปรียบเสมือนเสื้อที่เราใส่ ซึ่งใช้ในการตกเเต่งหน้าเว็บไซต์ของเราให้สวยงามแต่เราสามารถใช้ CSS ในการทำ Animation หรือเพิ่มการเคลื่อนไหวของวัตถุได้อีกด้วย
วันนี้ ผมก็จะมาสอนวิธีการทำ Animation ด้วย CSS กัน

มาเริ่มกันเลย
สิ่งที่เราจะใช้ในการทำอนิเมชั่นก็คือ @keyframes ซึ่ง @keyframes นั้นมีกฎที่ว่า style ของelement ในปัจจุบันจะเปลี่ยนไปตามที่เขียนไว้ใน @keyframes


เราจะมาลองทำให้กล่องสี่เหลี่ยม เคลื่อนที่จากซ้ายไปขวากัน
เริ่มแรกให้เราทำการเปิด text editor ขึ้นมา ในที่นี้ผมจะเปิด note pad น่ะครับ
จากนั้นให้พิมพ์ ตามภาพเลยครับ

จากภาพ ภายใน tag bodyเราจะทำการสร้าง div ภายใน div ก็จะสร้างคลาส มีชื่อว่า rectangle

จากนั้นให้ทำการเพิ่มไฟล์ CSS เข้ามาตามภาพ

หลังจากนั้นให้เราเซฟไฟล์ โดยตั้งชื่อเป็น index.html

จากนั้นให้เราเปิด notepad ขึ้นมาใหม่ โดยไฟล์นี้จะตั้งชื่อเป็น styles.css
ซึงเราก็จะได้ ไฟล์มา 2 ไฟล์คือ index.html กับ styles.css

จากนั้น ภายในไฟล์ styles.css ให้เขียนตามรูปดังนี้

โดย ภายใน class ractangle ก็จะกำหนด Properties ดังนี้
width:100px; คือความกว้างของกล่อง
height:100px; คือความสูงของกล่อง
background-color:red; กำหนดสีพื้นหลังเป็นสีแดง
position: relative; เพื่อให้มันอ้างจุดเริมต้นตามขนาดของหน้าจอของ browser
animation-name:moveon; กำหนดชื่อanimation เป็น moveon
animation-duration: 2s ; กำหนดระยะเวลาการเคลื่อนที่ เป็น 2s

โดย @keframes เราจะกำหนด Properties ดังนี้

ช่วง 0% เราจะำหนด ให้ left มีค่าเป็น 0%
ช่วง 100% เราจะกำหนดให้ left มีค่าเป็น 100%
แค่นี้เราก็ได้กล่องสีเหลี่ยมที่เคลื่อนที่จากซ้ายไปขวาแล้วครับ

เพื่อนๆ ก็สามารถนำไปประยุกต์ใช้ได้อีกแล้วแต่งานเลยครับ