Mẹo cho Công cụ cho nhà phát triển: Cách kiểm tra và sửa đổi ảnh động CSS

Sofia Emelianova
Sofia Emelianova

Thẻ Ảnh động trong Công cụ của Chrome cho nhà phát triển là một công cụ mạnh mẽ giúp bạn làm chậm, phát lại, điều chỉnh thời gian hoạt ảnh CSS và xem kết quả ngay lập tức.

Khi mở, thẻ Ảnh động sẽ tự động ghi lại ảnh động một cách thuận tiện nhóm lại và cho phép bạn:

  • Phát lại và giảm tốc độ của ảnh động để kiểm tra hiệu quả hơn.
  • Điều chỉnh thời lượng, thời gian và độ trễ bằng cách kéo các điểm trong dòng thời gian thay vì đoán và đặt các giá trị CSS theo cách thủ công.

Ngoài ra, bạn có thể chỉnh sửa thời gian gia tốc và thiết lập giá trị đường cong cubic-bezier tuỳ chỉnh bằng Trình chỉnh sửa gia tốc trong ngăn Elements > Styles (Phần tử). Để tìm hiểu thêm, hãy xem bài viết Chỉnh sửa ảnh động và dấu thời gian chuyển đổi bằng Easing Editor.

Để có trải nghiệm học tập thực tế hơn, hãy làm theo hướng dẫn Kiểm tra và sửa đổi các hiệu ứng ảnh động CSS.