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

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

salahuding
PHP Full Member
PHP Full Member
Posts: 40
Joined: 02/11/2020 10:14 am

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

Post by 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 น่ะครับ
จากนั้นให้พิมพ์ ตามภาพเลยครับ
1.jpg
จากภาพ ภายใน tag bodyเราจะทำการสร้าง div ภายใน div ก็จะสร้างคลาส มีชื่อว่า rectangle

จากนั้นให้ทำการเพิ่มไฟล์ CSS เข้ามาตามภาพ
12.jpg
หลังจากนั้นให้เราเซฟไฟล์ โดยตั้งชื่อเป็น index.html

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

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

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

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

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

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 8 guests