Using the Web Animations API
Web Animations API cho phép bạn tạo hoạt ảnh bằng JavaScript. Bài viết này giới thiệu các khái niệm cơ bản và cách dùng API này để tạo hoạt ảnh cho phần tử DOM.
Tổng quan
Web Animations API kết hợp cú pháp khai báo của CSS với sức mạnh của JavaScript. Bạn xác định các keyframes và tùy chọn định thời, rồi gọi animate() trên phần tử mục tiêu.
Các khái niệm cơ bản
Đoạn này mô tả keyframe, timing, playback control và các điểm khác biệt so với CSS animations.
Ví dụ
js
element.animate(
[
{ opacity: 0, transform: "translateY(20px)" },
{ opacity: 1, transform: "translateY(0)" },
],
{
duration: 300,
easing: "ease-out",
},
);