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 ด้วยตัวเองหากต้องการ

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

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

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

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

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

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

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

ตัวลดรูปพีชคณิตบูลีน

ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^

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

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

เครื่องมือตรวจสอบหมายเลขโทรศัพท์

ตรวจสอบโครงสร้างหมายเลขตามประเทศ พร้อมดูภูมิภาค ประเภท และรูปแบบ E.164 ระหว่างประเทศ ในประเทศ และ RFC 3966