css animation+transform
CSS Animation is a feature in CSS that allows you to create animations or changes of an element on a web page seamlessly and procedurally. It uses a set of commands called Keyframes to determine the state of the element and uses property animation to control how to play, move, change color, or resize the element without additional JavaScript.
The main components of CSS Animation
1. @ keyframes:
It is a set of commands used to define frames, or steps of the animation, specifying how the element changes state (such as position, color, size, transparency) over a specified period of time.
2. Animation Properties:
Used to determine which element @ keyframes to create and how to play. Important features include:
Animation-name: Define the name of the Keyframes to be adopted.
Animation-duration: Determine the total duration of one animation cycle (e.g. 2 seconds or 500 milliseconds).
animation-timing-function: Determine the acceleration rate or speed of state transition between frames (e.g. Linear, Ease).
Animation-delay: Define a delay period before the animation starts.
animation-iteration-count: Determine how many times the animation will repeat.
Animation-direction: Define the direction of animation play (e.g. play forward, backwards, alternating back and forth).
Animation-fill-mode: Determine whether the element will maintain the final state of the animation.
Benefits and advantages of CSS Animation
Create interesting:
Make the website more lively and interesting.
Performance:
It is lightweight and works well with the CPU, making the website load fast and efficient.
Easy to control:
You can create complex motion effects more easily compared to using JavaScripts.
No JavaScript required:
For most animation tasks, you can create with CSS alone.
CSS Animation is ideal for tasks such as Hover effects, highlighting text, creating slideshows, or moving components on web pages.
ถ้าคุณกำลังหา “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) เพราะมักทำงานได้ดีและไม่หน่วง ช่วยให้เว็บดูโปรขึ้นแบบง่ายมาก
