css animation+transform

#พื้นฐานการเขียนเว็ปไซต์

#tranform

#animation

#css

CSS Animation คือ ฟีเจอร์ใน CSS ที่ให้คุณสร้างภาพเคลื่อนไหวหรือการเปลี่ยนแปลงของเอลิเมนต์บนเว็บเพจได้อย่างราบรื่นและมีขั้นตอน โดยใช้ชุดคำสั่งที่เรียกว่า Keyframes ในการกำหนดสถานะต่างๆ ของเอลิเมนต์ และใช้ property แอนิเมชัน ในการควบคุมวิธีการเล่น การเคลื่อนไหว การเปลี่ยนสี หรือการปรับขนาดของเอลิเมนต์ โดยไม่ต้องใช้ JavaScript เพิ่มเติม.

ส่วนประกอบหลักของ CSS Animation

1. @keyframes:

เป็นชุดคำสั่งที่ใช้กำหนด เฟรม หรือ ขั้นตอนต่างๆ ของแอนิเมชัน โดยระบุว่าเอลิเมนต์จะเปลี่ยนสถานะ (เช่น ตำแหน่ง, สี, ขนาด, ความโปร่งใส) อย่างไรในช่วงเวลาที่กำหนด.

2. Properties แอนิเมชัน:

ใช้เพื่อกำหนดว่าจะให้ @keyframes ที่สร้างไว้ทำงานกับเอลิเมนต์ใด และจะเล่นอย่างไร. คุณสมบัติที่สำคัญได้แก่:

animation-name: กำหนดชื่อของ Keyframes ที่จะนำมาใช้.

animation-duration: กำหนดระยะเวลาทั้งหมดของหนึ่งรอบแอนิเมชัน (เช่น 2 วินาที หรือ 500 มิลลิวินาที).

animation-timing-function: กำหนดอัตราเร่งหรือความเร็วของการเปลี่ยนสถานะระหว่างเฟรม (เช่น Linear, Ease).

animation-delay: กำหนดระยะเวลาหน่วงก่อนที่แอนิเมชันจะเริ่มทำงาน.

animation-iteration-count: กำหนดจำนวนครั้งที่แอนิเมชันจะทำซ้ำ.

animation-direction: กำหนดทิศทางการเล่นแอนิเมชัน (เช่น เล่นไปข้างหน้า, ถอยหลัง, สลับไปมา).

animation-fill-mode: กำหนดว่าเอลิเมนต์จะคงสถานะสุดท้ายของแอนิเมชันไว้หรือไม่.

ประโยชน์และข้อดีของ CSS Animation

สร้างความน่าสนใจ:

ทำให้เว็บไซต์ดูมีชีวิตชีวาและน่าสนใจยิ่งขึ้น.

ประสิทธิภาพ:

มีน้ำหนักเบาและทำงานได้ดีกับ CPU ทำให้เว็บไซต์โหลดเร็วและมีประสิทธิภาพ.

ควบคุมได้ง่าย:

คุณสามารถสร้างเอฟเฟกต์การเคลื่อนไหวที่ซับซ้อนได้ง่ายกว่าเมื่อเทียบกับการใช้ JavaScript.

ไม่ต้องใช้ JavaScript:

สำหรับงานแอนิเมชันส่วนใหญ่ คุณสามารถสร้างได้ด้วย CSS เพียงอย่างเดียว.

CSS Animation เหมาะอย่างยิ่งสำหรับงานต่างๆ เช่น การทำเอฟเฟกต์ Hover, การเน้นข้อความ, การสร้างสไลด์โชว์ หรือการเคลื่อนไหวของส่วนประกอบต่างๆ บนเว็บเพจ.

2025/9/9 แก้ไขเป็น

... อ่านเพิ่มเติมถ้าคุณกำลังหา “css animations tutorial” แบบเริ่มจากศูนย์ ฉันแนะนำให้โฟกัส 2 อย่างก่อนเลย: 1) @keyframes และ 2) การใช้ transform ร่วมกับ animation เพราะ transform เป็นตัวที่ทำให้การเคลื่อนไหวลื่นมาก (ย้ายตำแหน่ง/ย่อ-ขยาย/หมุน) โดยไม่ต้องพึ่ง JavaScript ตัวอย่างที่ฉันชอบใช้ฝึกคือ “เด้งกลับไปสู่รูปแบบเดิม” (เหมือนยืดแล้วคืนตัว) ซึ่งทำได้ด้วย scale + timing-function แบบง่ายๆ: 1) สร้าง keyframes - 0%: scale(1) - 50%: scale(1.15) - 100%: scale(1) เพื่อให้กลับไปสู่รูปแบบเดิม 2) ผูกกับ element - ตั้ง animation-duration เช่น 600ms - ใช้ animation-timing-function: ease-in-out จะได้ความรู้สึกธรรมชาติ - ถ้าอยากให้ “วนเรียนตลอดไป” ก็ใส่ animation-iteration-count: infinite ทริคที่เจอว่าช่วยมาก: - ถ้าต้องการให้เริ่มช้าแล้วเร็ว หรือเร็วแล้วช้า ลองสลับ timing-function ระหว่าง ease, ease-in, ease-out, linear (เริ่มจาก ease-in-out ก่อน ปลอดภัยสุด) - ถ้าอยากให้มันสลับไปมาแบบไป-กลับ (เด้งกลับ) ใช้ animation-direction: alternate จะช่วยลดการเขียน keyframes ซ้ำ - ถ้าคุณอยากให้จบแล้วค้างที่เฟรมสุดท้าย (ไม่กลับ) ใช้ animation-fill-mode: forwards แต่ถ้าเป้าหมายคือ “กลับไปสู่รูปแบบเดิม” ให้ปล่อยค่า default หรือกำหนด keyframes ให้กลับมาที่ 100% เปรียบเทียบแบบคนทำเว็บ: “CSS animation” vs “Postman” หลายคนเสิร์ชคำว่า “postman vs css animations” แล้วงง เพราะมันคนละโลกกันเลย: Postman คือเครื่องมือทดสอบ API (ส่ง request/ดู response) ส่วน CSS Animations คือทำเอฟเฟกต์ภาพเคลื่อนไหวบนหน้าเว็บ ถ้าคุณกำลังทำเว็บแอปจริงๆ มักจะใช้ทั้งคู่ร่วมกัน: Postman ไว้เช็ค API และ CSS animation ไว้ทำให้ UI ดูไหลลื่น เช่น ปุ่มโหลด, skeleton, hover effect เสริมสำหรับคนออกแบบที่เจอคำว่า “Scale strokes & effects (Figma) checkbox” ถ้าคุณออกแบบใน Figma แล้ว export มาใช้บนเว็บ บางครั้งขนาดเส้น/เอฟเฟกต์อาจย่อ-ขยายตามการ scale ทำให้ตอนเอาไปทำ CSS transform: scale() แล้วความหนาดูไม่เท่าที่คิด ใน Figma จะมีตัวเลือก “Scale strokes & effects” เพื่อกำหนดว่าจะให้ stroke/เอฟเฟกต์ถูกสเกลไปด้วยไหม - ถ้าต้องการให้ไอคอน/เส้นคมเท่าเดิมตอนปรับขนาด อาจปิดไว้ - ถ้าต้องการให้ทุกอย่างโตไปพร้อมกัน เปิดไว้ สุดท้าย ถ้าจะทำแอนิเมชันให้ลื่นจริงๆ ฉันจะพยายามใช้ transform และ opacity เป็นหลัก (เช่น translate/scale/rotate + fade) เพราะมักทำงานได้ดีและไม่หน่วง ช่วยให้เว็บดูโปรขึ้นแบบง่ายมาก

โพสต์ที่เกี่ยวข้อง

ครูฝน

ครูฝน

ถูกใจ 3 ครั้ง

css transform
#CSS #tranform #พื้นฐานการเขียนเว็ปไซต์ CSS 2D Transform Functions คือ ฟังก์ชันที่ใช้ในคุณสมบัติ transform ของ CSS เพื่อเปลี่ยนแปลงรูปร่างองค์ประกอบ HTML ใน 2 มิติ เช่น หมุน (rotate), ปรับขนาด (scale), เอียง (skew), และ ย้ายตำแหน่ง (translate) โดยไม่ต้องใช้ JavaScript เพิ่มเติม. ฟังก์ชั
ขีดเขียน

ขีดเขียน

ถูกใจ 2 ครั้ง

ภาพรวมกิจกรรมการเรียนสาขาสื่อศิลปะและการออกแบบสื่อ มช. แสดงการทำงานกราฟิกบนคอมพิวเตอร์, การสร้างโมเดล 3D, การถ่ายภาพ, และการทำงานกลุ่มของนักศึกษา
ภาพชีวิตนักศึกษาปี 1 สาขาสื่อศิลปะและการออกแบบสื่อ มช. แสดงนักศึกษากับพลุไฟ, ตัวอย่างงานออกแบบโปสการ์ดและโปสเตอร์, และงานออกแบบแบรนด์สินค้า 'snowball' ที่เป็นโปรเจกต์สุดท้ายของวิชา Design
ภาพชีวิตนักศึกษาปี 2 สาขาสื่อศิลปะและการออกแบบสื่อ มช. แสดงการเรียนรู้การเขียนโค้ด HTML/CSS, การเลือกเรียน Animation, การสร้างและ Rigging โมเดล 3D, และการทำ Short Animation
# Review สาขาสื่อศิลปะและการออกแบบสื่อ มช ♡🐘⭐️
รีวิว Media Arts and Design แบบไวไว ฉบับคนใกล้จะจบแล้ว เหลืออีกปีเดียวเท่านั้นน 🤯 สาขานี้ให้ประสบการณ์เยอะมาก ๆ และไม่ได้บังคับฝึกงานนะคะ🙅 ♡♡ #เปิดเทอม #ทีมมช #dek65 #รีวิวคณะที่เรียน #วิจิตรศิลป์ คณะวิจิตรศิลป์ มหาวิทยาลัยเชียงใหม่
Fevruary

Fevruary

ถูกใจ 157 ครั้ง

สกิลเสริมที่ทำให้พอร์ต UX/UI น่าสนใจขึ้น
สกิลเสริมที่ทำให้พอร์ต UX/UI น่าสนใจขึ้น และเพิ่มโอกาสได้งาน เดี๋ยววันหลังจะมาเล่าแต่ละสกิลให้ฟัง ฝากกดติดตามไว้ 😉 ย้ำ สกิลพวกนี้ไม่ต้องเก่งขั้นเทพ แต่แค่มีพื้นฐาน ก็ทำให้พอร์ตดูครบและมีโอกาสได้งานมากขึ้น และมันสามารถใช้ได้จริงในชีวิตการทำงาน #UXUI #uxuidesign #รีวิวอาชีพ #วัยทำงาน
Nashavibes

Nashavibes

ถูกใจ 395 ครั้ง

css perspective+tranform
#พื้นฐานการเขียนเว็ปไซต์ #perspective #tranform #CSS CSS Perspective เป็นคุณสมบัติที่ใช้ในการสร้างพื้นที่ 3 มิติให้กับองค์ประกอบในเว็บเพจ โดยกำหนดระยะห่างของผู้ชมจากวัตถุ ทำให้องค์ประกอบต่างๆ ที่ถูกแปลง (เช่น การหมุน) แสดงผลออกมาเหมือนจริงเหมือนกับสิ่งที่ตาเรามองเห็นในชีวิตจริง เช่น ว
ขีดเขียน

ขีดเขียน

ถูกใจ 5 ครั้ง

ภาพโต๊ะทำงานที่มีจอคอมพิวเตอร์แสดงโค้ดโปรแกรม แล็ปท็อป และคีย์บอร์ดเรืองแสงสีม่วง พร้อมข้อความว่า 'ฝึกเขียนโปรแกรม ด้วยการเล่นเกม' และไอคอนโค้ดกับจอยเกม
ภาพหน้าจอเกม 'CSS Diner' แสดงจานที่มีแอปเปิล ช่องสำหรับพิมพ์ CSS selector และโค้ด HTML เพื่อฝึกการเลือกองค์ประกอบด้วย CSS
ภาพหน้าจอเกม 'VIM ADVENTURES' แสดงตัวละครพิกเซลในเขาวงกตที่มีข้อความ 'Hello world!' เพื่อสอนคำสั่งและคีย์ลัดของโปรแกรมแก้ไขข้อความ Vim
ได้เล่นเกม แถมได้ฝึกเขียนโปรแกรมด้วย
#เขียนโปรแกรม #programming #โปรแกรมเมอร์ #developer #เกม
นักเดฟ - NakDev

นักเดฟ - NakDev

ถูกใจ 1274 ครั้ง

ภาพปกบทความแสดงหัวข้อ 'CODING HTML/CSS/JAVASCRIPT ทำงานร่วมกันยังไง ทำไมถึงขาดกันไม่ได้' บนพื้นหลังสีฟ้าอ่อน มีภาพคนยืนอยู่กลางผืนน้ำสะท้อนเงาและภูเขาเลือนราง พร้อมโลโก้ Lemon8 @nerddailydose สื่อถึงการเรียนรู้และทำความเข้าใจเทคโนโลยีเว็บ
HTML/ CSS / JavaScrip ทำงานร่วมกันยังไง ทำไมถึงขาดไม่ได้✨
การเรียนรู้ HTML + CSS + JavaScript พร้อมกัน เป็นสิ่งสำคัญมากสำหรับคนที่อยากทำเว็บไซต์หรือแอปพลิเคชันบนเว็บ เพราะทั้ง 3 ภาษานี้ทำงานร่วมกันเป็นทีม และมีหน้าที่ต่างกันแต่ “ขาดกันไม่ได้” ⸻ 📌 เปรียบเทียบให้เข้าใจง่าย ลองนึกภาพว่า เว็บไซต์ คือ ร่างกายมนุษย์ HTML โครงกระดูก โครงสร้างเนื้อหา
NerdDailyDose

NerdDailyDose

ถูกใจ 6 ครั้ง

ทำโปรแกรมเสี่ยงทาย ด้วย Canva Code 🥠🧧 #CanvaCode #canva #canvadesign
beerrtoshare

beerrtoshare

ถูกใจ 10 ครั้ง

content #3
#พื้นฐานการเขียนเว็ปไซต์ #appscript #google 1. โครงสร้าง HTML (The HTML Structure) ขั้นแรกสร้างโครงสร้างพื้นฐานในไฟล์ HTML ของคุณ โดยประกอบด้วย 2 ส่วนหลักๆ คือ ปุ่มสำหรับเปิด/ปิด และ ตัวกล่อง Modal เอง HTML <div class="toggle-container"> <input type="checkbox&
ขีดเขียน

ขีดเขียน

ถูกใจ 3 ครั้ง

ภาพบุคคลถือโทรศัพท์มือถือบังหน้าจอคอมพิวเตอร์ที่แสดงโค้ด พร้อมข้อความว่า "คำศัพท์ HTML ที่คนเขียนโค้ด ต้องรู้!!" และ "ส่วนผมก็ยังไม่รู้" เน้นย้ำถึงคำศัพท์ HTML ที่จำเป็นสำหรับนักพัฒนา
ภาพแสดงรายการคำศัพท์ HTML 10 คำแรก ได้แก่ Tag, Doctype, Head, Meta, Heading, Image, Body, Anchor, Div และ HTML พร้อมคำอธิบายสั้นๆ บนพื้นหลังหน้าจอคอมพิว��เตอร์ที่แสดงโค้ด
ภาพแสดงรายการคำศัพท์ HTML ลำดับที่ 11-20 ได้แก่ Span, Break, Horizontal Rule, Form, Input, Button, Textarea, Blockquote, Placeholder และ Bold พร้อมคำอธิบายสั้นๆ บนพื้นหลังหน้าจอคอมพิวเตอร์ที่แสดงโค้ด
คำศัพท์ HTML ที่คนเขียนโค้ดต้องรู้ !✨
1. Tag - เครื่องหมายที่ใช้กำหนดโครงสร้างของ HTML 2. Doctype (<!DOCTYPE html>) - ประกาศเวอร์ชันของ HTML ที่ใช้ 3. Head - ส่วนที่ใช้กำหนดข้อมูลของเอกสาร(metadata) 4. Meta - แท็กที่ใช้กำหนดข้อมูลเกี่ยวกับเอกสาร เช่น charset, description 5. Heading (<h1> - <h6>) - หัวข้อของเนื้อหา
Dekrian_04

Dekrian_04

ถูกใจ 296 ครั้ง

ดูเพิ่มเติม