เพิ่มใน Chrome
← กลับไปยังคุณสมบัติ
Pro

ตรวจสอบแอนิเมชัน

ควบคุมทุกแอนิเมชัน CSS และทรานซิชันบนหน้าเว็บอย่างเต็มที่

เพิ่มใน Chrome เพิ่มไปยัง Edge เพิ่มใน FireFox

ควบคุมทุกแอนิเมชัน CSS และทรานซิชันบนหน้าเว็บ

ตัวอย่างสด
example.com/animated-landing ตัวตรวจสอบแอนิเมชัน: เปิด
▶
⏸
0.25x 0.5x 1x 2x 4x
ตรวจพบ 4 รายการ
แอนิเมชันบนหน้าเว็บ
  • fadeInUp
    .hero-title · @keyframes
    0.6s ease-out
    ดีเลย์: 0 วินาที · 1 รอบ
    กำลังทำงาน
  • slideIn
    .sidebar-nav · @keyframes
    0.4s ease
    ดีเลย์: 0.2 วินาที · 1 รอบ
    กำลังทำงาน
  • pulse
    .notification-badge · @keyframes
    2s ease-in-out
    ดีเลย์: 0 วินาที · ต่อเนื่อง
    หยุดชั่วคราว
  • background-color
    .cta-button · transition
    0.2s ease
    คุณสมบัติทรานซิชัน
    active
ไทม์ไลน์ — fadeInUp 0.24s / 0.60s
0.0s 0.15s 0.30s 0.45s 0.60s
รายละเอียดแอนิเมชัน
fadeInUp on .hero-title
@keyframes
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
คุณสมบัติ
duration0.6s
easingease-out
delay0s
iterations1
directionnormal
fill-modeforwards
สถานะปัจจุบัน (40%)
opacity0.4
translateY12px
คุณสมบัติหลัก

หยุด/เล่นทั้งหมด

หยุดทุกแอนิเมชันด้วยคลิกเดียว

ควบคุมความเร็ว

ปรับจาก 0.25x ถึง 4x

รายการแอนิเมชัน

ตรวจจับและแสดงทุกแอนิเมชัน

เลื่อนไทม์ไลน์

ลากเพื่อเคลื่อนที่ทีละเฟรม

ควบคุมแต่ละรายการ

หยุดหรือปรับความเร็วแยกกัน

รายละเอียดคุณสมบัติ

คลิกดูการประกาศ CSS เต็ม

สิ่งที่คุณสามารถตรวจสอบได้

ตรวจสอบแอนิเมชัน covers the following, organized by category:

คุณสมบัติแอนิเมชัน

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state

คุณสมบัติทรานซิชัน

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

ฟังก์ชันเวลา

  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • linear
  • cubic-bezier()
  • steps()

คุณสมบัติ Transform

  • transform
  • transform-origin
  • translate
  • rotate
  • scale
  • skew
กรณีการใช้งานทั่วไป

แก้ไขแอนิเมชันกระตุก

ชะลอเป็น 0.25x เพื่อหาจุดที่มีปัญหา

ปรับจูน Timing

ใช้ไทม์ไลน์ดู Easing curve

เข้าใจไลบรารี

ตรวจสอบวิธีสร้างแอนิเมชันที่น่าทึ่ง

ทดสอบ QA แอนิเมชัน

ตรวจ hover, spinner และทรานซิชัน

รีวิวการเข้าถึง

ตรวจสอบ prefers-reduced-motion

วิธีใช้งาน
1

เปิดใช้งาน

คลิกไอคอนใน dock

2

ดูแอนิเมชันที่ตรวจจับ

แผงแสดงรายการแอนิเมชัน

3

หยุดและตรวจสอบ

หยุดทุกแอนิเมชันพร้อมกัน

4

ปรับความเร็ว

ชะลอหรือเร่ง

5

เลื่อนไทม์ไลน์

ลากไปมาในแอนิเมชัน

พร้อมที่จะลองหรือยัง?

ติดตั้ง DevSuite Pro ฟรีและปลดล็อกเครื่องมือสำหรับนักพัฒนามากกว่า 64 รายการสำหรับเบราว์เซอร์ของคุณ

เพิ่มใน Chrome เพิ่มไปยัง Edge เพิ่มใน FireFox