Softonic

ตัวสร้าง CSS Animation

ขั้นตอน 1 / 2
ค่าที่ตั้งไว้ล่วงหน้า
ถัดไป

การเขียน @keyframes ด้วยตัวเองนั้นน่าเบื่อ: คุณต้องเลือกเปอร์เซ็นต์ เดาสรรพคุณ รีเฟรช ดูผล แล้วปรับใหม่ ตัวสร้างนี้ให้แอนิเมชันสำเร็จรูปหกแบบ (จางหาย เลื่อนขึ้น เด้ง หมุน เต้นเป็นจังหวะ และสั่น) และให้คุณตั้งชื่อแอนิเมชัน ระยะเวลา easing จำนวนรอบ และทิศทาง ผลลัพธ์เล่นแบบเรียลไทม์ และเมื่อพอใจแล้วคุณสามารถคัดลอกบล็อก @keyframes ที่สร้างขึ้นและคุณสมบัติย่อ animation ได้

วิธีสร้าง CSS animation

  1. 1

    เลือก preset

    เลือกหนึ่งในหกแอนิเมชันในตัว: จางหาย เลื่อนขึ้น เด้ง หมุน เต้นเป็นจังหวะ หรือสั่น

  2. 2

    ตั้งชื่อแอนิเมชัน

    ตั้งตัวระบุ CSS ที่ถูกต้องให้ keyframes เช่น `cardIn` หรือ `fadeIn` ชื่อเดียวกันนี้ใช้ในคุณสมบัติย่อ `animation` ด้วย

  3. 3

    ตั้งเวลาและการทำซ้ำ

    ระยะเวลาเป็นวินาที easing (ease, ease-in, ease-out, ease-in-out, linear หรือ spring) จำนวนรอบ (1, 2, 3 หรือ infinite) และทิศทาง (normal, reverse, alternate หรือ alternate-reverse)

  4. 4

    คัดลอก CSS

    กฎ `@keyframes` ที่สร้างขึ้นและรูปแบบย่อ `animation:` พร้อมวางลงในสไตล์ชีตของคุณ

โครงสร้างของแอนิเมชัน

@keyframes slide-in {
  0%   { transform: translateX(-100%); opacity: 0; }
  60%  { transform: translateX(10%);   opacity: 1; }
  100% { transform: translateX(0);     opacity: 1; }
}

.card {
  animation: slide-in 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

แปดคุณสมบัติในรูปแบบย่อ: animation-name duration timing-function delay iteration-count direction fill-mode play-state

ตัวเลือก easing

ตัวสร้างนี้มีฟังก์ชัน easing หกแบบ:

Easing cubic-bezier() ความรู้สึก
linear ไม่มี ความเร็วคงที่
ease-in 0.42, 0, 1, 1 เริ่มช้า จบเร็ว
ease-out 0, 0, 0.58, 1 เริ่มเร็ว จบช้า
ease-in-out 0.42, 0, 0.58, 1 ช้า-เร็ว-ช้า
ease (ค่าเริ่มต้น) 0.25, 0.1, 0.25, 1 ค่าเริ่มต้นที่นุ่มนวล
spring 0.68, -0.55, 0.27, 1.55 เลยเป้าหมายแล้วกลับมาตั้งตัว

เลือกคุณสมบัติที่ถูกต้องในการทำแอนิเมชัน

เบราว์เซอร์ทำแอนิเมชันกับคุณสมบัติใดก็ได้ แต่มีเพียงไม่กี่อย่างที่ลื่นบน GPU โดยไม่กระตุ้น layout หรือการวาดภาพ:

ราคาถูก (composite เท่านั้น): transform, opacity, filter

ราคาแพง (layout/การวาด): width, height, top, left, margin, padding, background-color

แอนิเมชันหกสิบเฟรมต่อวินาทีบน width และ top เป็นไปได้กับองค์ประกอบขนาดเล็ก แต่จะกระตุกบนมือถือหากทำหลายตัวพร้อมกัน สำหรับการเคลื่อนไหวที่ซับซ้อน ให้ใช้ transform: translate(...) แทน top / left เสมอ และใช้ transform: scale(...) แทนการเปลี่ยนความกว้าง/ความสูง

will-change: ใช้เท่าที่จำเป็น

การบอกให้เบราว์เซอร์จัดสรรเลเยอร์ composite ล่วงหน้าอาจช่วยให้ลื่นขึ้น:

.card { will-change: transform; }

แต่กินหน่วยความจำ ใช้ก่อนที่แอนิเมชันจะเริ่ม และลบออกเมื่อเสร็จ การตั้ง will-change: transform ถาวรกับหลายองค์ประกอบอาจเสียหายมากกว่าได้ประโยชน์

ลดการเคลื่อนไหว

ผู้ใช้บางคนไวต่อการเคลื่อนไหวและตั้งค่าตามระบบปฏิบัติการ:

@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
  }
}

เคารพการตั้งค่านี้ เสนอการเปลี่ยนสถานะทันทีหรือการจางหายที่ละเอียดมากเป็นทางเลือก

คำถามที่พบบ่อย

CSS สำหรับการเคลื่อนไหวที่เรียบง่าย ประกาศชัดเจน และใช้ครั้งเดียว Web Animations API (element.animate()) สำหรับการควบคุมเวลาด้วย JavaScript keyframes แบบไดนามิก การหยุดชั่วคราว และการควบคุมการเล่น ทั้งคู่ทำงานบนคอมโพซิเตอร์ ไม่มีตัวไหนเร็วกว่าโดยเนื้อแท้

เกือบทุกครั้งเพราะคุณทำแอนิเมชันกับคุณสมบัติที่กระตุ้น layout (width, top, margin) แทน transform เปลี่ยนไปใช้ translate() และ scale() อาการกระตุกมักจะหายไป

ได้ animation: a 1s, b 1s 1s, c 1s 2s; ทำงานสามแอนิเมชันตามลำดับด้วยการหน่วงเวลาที่เหลื่อมกัน ตัวสร้างนี้ให้ผลลัพธ์เป็นแอนิเมชันเดียว ดังนั้นเพิ่มรายการพิเศษในรูปแบบย่อด้วยตัวเอง สำหรับการจัดวางที่ซับซ้อนกว่านั้น ให้ใช้ Web Animations API หรือไลบรารีเช่น GSAP

ทำให้องค์ประกอบเข้าสู่สถานะ from ก่อนแอนิเมชันเริ่ม (ระหว่างหน่วงเวลา) และคงสถานะ to ไว้หลังแอนิเมชันจบ หากไม่มี both องค์ประกอบจะกลับไปใช้สไตล์ก่อนแอนิเมชันเมื่อเสร็จสิ้น ตัวสร้างนี้คงรูปแบบย่อให้สั้นที่สุด ดังนั้นเพิ่ม fill mode ด้วยตัวเองหากต้องการ

เครื่องมือที่เกี่ยวข้อง

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

ตารางอ้างอิงแป้นพิมพ์ลัด

ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux

เครื่องสุ่มที่อยู่

สร้างระเบียนคล้ายที่อยู่ 1–20 รายการสำหรับแบบจำลองและการทดสอบ ด้วยรูปแบบประเทศแบบย่อ

ตัวตรวจสอบความถูกต้องของ JSON

ตรวจสอบไวยากรณ์ JSON และตรวจจับเครื่องหมายจุลภาคต่อท้าย เครื่องหมายอัญประกาศที่ผิด คีย์ซ้ำ และโครงสร้างที่ผิดรูปแบบ พร้อมระบุตำแหน่งข้อผิดพลาดอย่างแม่นยำ

เครื่องสร้างตัวอักษรสุ่ม

สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน

เครื่องมือนี้มีให้บริการในภาษาอื่น