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

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

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

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

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

ตัวอย่างสด
example.com/animated-landing Animation Inspector: ON
▶
⏸
0.25x 0.5x 1x 2x 4x
4 detected
Animations on page
  • fadeInUp
    .hero-title · @keyframes
    0.6s ease-out
    delay: 0s · 1 iteration
    running
  • slideIn
    .sidebar-nav · @keyframes
    0.4s ease
    delay: 0.2s · 1 iteration
    running
  • pulse
    .notification-badge · @keyframes
    2s ease-in-out
    delay: 0s · infinite
    paused
  • background-color
    .cta-button · transition
    0.2s ease
    transition property
    active
Timeline — fadeInUp 0.24s / 0.60s
0.0s 0.15s 0.30s 0.45s 0.60s
Animation Details
fadeInUp on .hero-title
@keyframes
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
Properties
duration0.6s
easingease-out
delay0s
iterations1
directionnormal
fill-modeforwards
Current State (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 ฟรีและปลดล็อกเครื่องมือสำหรับนักพัฒนามากกว่า 39 รายการสำหรับเบราว์เซอร์ของคุณ

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