หลายคนก็พอจะรู้จัก 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%
แค่นี้เราก็ได้กล่องสีเหลี่ยมที่เคลื่อนที่จากซ้ายไปขวาแล้วครับ
เพื่อนๆ ก็สามารถนำไปประยุกต์ใช้ได้อีกแล้วแต่งานเลยครับ
วิธีการทำ Animation ด้วย CSS โดยใช้ @keyframe
Moderator: mindphp, ผู้ดูแลกระดาน
-
- PHP Full Member
- โพสต์: 40
- ลงทะเบียนเมื่อ: 02/11/2020 10:14 am
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
-
โพสต์ใหม่ การทำ Button Groups โดยใช้ bootstap
โดย chavikat.p » 04/12/2017 3:48 pm » ใน Booststap Knowledge - 0 ตอบกลับ
- 1857 แสดง
-
โพสต์ล่าสุด โดย chavikat.p
04/12/2017 3:48 pm
-
-
-
โพสต์ใหม่ การทำ datatable(ดาต้าเทเบล) โดยใช้ bootstrap(บูตสแตบ)
โดย Parichat » 09/01/2018 12:32 am » ใน Booststap Knowledge - 0 ตอบกลับ
- 3854 แสดง
-
โพสต์ล่าสุด โดย Parichat
09/01/2018 12:32 am
-
-
- 0 ตอบกลับ
- 2647 แสดง
-
โพสต์ล่าสุด โดย chavikat.p
04/12/2017 3:43 pm
-
- 0 ตอบกลับ
- 5878 แสดง
-
โพสต์ล่าสุด โดย watcharin
26/03/2018 4:30 pm
-
-
โพสต์ใหม่ python ใช้ไลบรารี่อะไรในการทำ 3D animation
โดย narin-thongseubsai » 13/10/2021 10:50 am » ใน Programming - C/C++ & java & Python - 2 ตอบกลับ
- 1529 แสดง
-
โพสต์ล่าสุด โดย narin-thongseubsai
15/10/2021 2:04 pm
-
-
-
โพสต์ใหม่ How to Add Animation and Transitions to React Components?
โดย Codalien » 06/11/2023 2:33 pm » ใน JavaScript & jQuery Ajax & Node.JS - 0 ตอบกลับ
- 6487 แสดง
-
โพสต์ล่าสุด โดย Codalien
06/11/2023 2:33 pm
-
-
-
โพสต์ใหม่ วิธีการทำ Animation ด้วยโปรแกรม Photoshop ง่าย ๆ
โดย Auttasti » 31/07/2019 11:29 am » ใน Graphic design - 1 ตอบกลับ
- 1094 แสดง
-
โพสต์ล่าสุด โดย LEG
30/09/2019 2:44 pm
-
-
-
โพสต์ใหม่ FAVEFFECTS Extension เสริมแสดง icon animation
โดย prakasit.bank » 02/06/2015 2:13 pm » ใน Joomla Extension Review - 0 ตอบกลับ
- 876 แสดง
-
โพสต์ล่าสุด โดย prakasit.bank
02/06/2015 2:13 pm
-
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 67