Trình tạo animation CSS

Giải phẫu 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;
}

Tám thuộc tính trong dạng rút gọn: animation-name duration timing-function delay iteration-count direction fill-mode play-state.

Lựa chọn easing

Trình tạo cung cấp sáu hàm easing:

Làm animation với đúng thuộc tính

Trình duyệt có thể làm animation với bất kỳ thuộc tính nào, nhưng chỉ một vài thuộc tính chạy mượt trên GPU mà không kích hoạt layout hoặc vẽ lại:

Rẻ (chỉ composite): transform, opacity, filter.

Đắt (layout/vẽ): width, height, top, left, margin, padding, background-color.

Animation sáu mươi khung hình mỗi giây trên width và top có thể chạy trên phần tử nhỏ, nhưng sẽ giật trên điện thoại nếu bạn làm nhiều phần tử cùng lúc. Với chuyển động phức tạp, luôn ưu tiên transform: translate(...) thay cho top / left, và transform: scale(...) thay cho việc làm animation chiều rộng/chiều cao.

will-change: dùng tiết kiệm

Báo cho trình duyệt cấp trước một lớp composite có thể giúp chuyển động mượt hơn:

.card { will-change: transform; }

Nhưng nó tốn bộ nhớ. Hãy áp dụng ngay trước khi animation kích hoạt và gỡ bỏ khi xong. Đặt will-change: transform vĩnh viễn trên nhiều phần tử có thể gây hại nhiều hơn lợi.

Giảm chuyển động

Một số người dùng nhạy cảm với chuyển động và cài đặt tùy chọn hệ điều hành:

@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
  }
}

Hãy tôn trọng thiết lập này. Cung cấp sự thay đổi trạng thái tức thì hoặc hiệu ứng mờ dần rất nhẹ để thay thế.