Công cụ trực tuyến CSS3 Animation Generator

Animation

Trình tạo CSS Animation cho những người lười biếng.

Hoạt ảnh CSS

CSS cho phép tạo hoạt ảnh cho các phần tử HTML mà không cần sử dụng JavaScript hoặc Flash

Trong chương này, bạn sẽ tìm hiểu về các thuộc tính sau:

  • @keyframes
  • tên hoạt hình
  • Thời lượng hoạt ảnh
  • hoạt ảnh-độ trễ
  • hoạt-động-lặp-đếm
  • hướng hoạt hình
  • hoạt hình-thời gian-chức năng
  • hoạt hình-điền-chế độ
  • hoạt hình

Tiền tố cụ thể của trình duyệt

Một số trình duyệt cũ hơn cần các tiền tố cụ thể (-webkit-) để hiểu các thuộc tính hoạt ảnh

 

CSS Animations là gì?

Hoạt ảnh cho phép một phần tử dần dần thay đổi từ kiểu này sang kiểu khác.

Bạn có thể thay đổi bao nhiêu thuộc tính CSS mà bạn muốn, bao nhiêu lần bạn muốn.

Để sử dụng hoạt ảnh CSS, trước tiên bạn phải chỉ định một số khung hình chính cho hoạt ảnh.

Khung hình chính giữ kiểu dáng mà phần tử sẽ có tại một số thời điểm nhất định.

 

Quy tắc @keyframes

Khi bạn chỉ định kiểu CSS bên trong quy tắc @keyframes, hoạt ảnh sẽ dần thay đổi từ kiểu hiện tại sang kiểu mới tại một số thời điểm nhất định.