Thuộc tính tên hoạt ảnh chỉ định một hoặc nhiều tên hoạt ảnh được xác định bởi quy tắc @keyframes sẽ được áp dụng cho phần tử đã chọn. Khi nhiều giá trị được phân tách bằng dấu phẩy được chỉ định cho bất kỳ thuộc tính hoạt ảnh nào, chúng sẽ được đính kèm với hoạt ảnh được xác định khác trong tên hoạt ảnh
Thuộc tính animation-name là một trong những thuộc tính CSS3
Thuộc tính tốc ký hoạt hình có thể được sử dụng để đặt tất cả các thuộc tính hoạt hình cùng một lúc. Các thuộc tính hoạt ảnh khác nhau có thể điều khiển hoạt ảnh. Họ có thể chỉ định thời gian lặp lại của hoạt ảnh, liệu hoạt ảnh sẽ được phát hay tạm dừng và liệu nó có xen kẽ giữa các giá trị hay không. Thời gian bắt đầu hoạt hình cũng có thể bị trì hoãn
Khi animation-name
chỉ định danh sách tên, các thuộc tính hoạt hình khác như animation-duration
sẽ xác định các giá trị tương ứng với từng tên. Nếu danh sách giá trị cho các thuộc tính hoạt hình khác không có cùng số lượng giá trị như animation-name
, thì độ dài của danh sách animation-name
xác định số lượng mục trong mỗi danh sách được kiểm tra khi bắt đầu hoạt ảnh. Các danh sách được so khớp từ giá trị đầu tiên. giá trị dư thừa ở cuối không được sử dụng. Nếu một trong các thuộc tính khác không có đủ giá trị được phân tách bằng dấu phẩy để khớp với số lượng giá trị của animation-name
, danh sách sẽ được lặp lại cho đến khi có đủ. Việc cắt ngắn hoặc lặp lại này không ảnh hưởng đến giá trị được tính toán
Thuộc tính CSS animation-name
xác định danh sách hoạt ảnh áp dụng. Mỗi tên được sử dụng để chọn quy tắc @keyframes
cung cấp các giá trị thuộc tính cho hoạt ảnh
cú pháp
Những giá trị khả thi
name
Tên của quy tắc @keyframes
cung cấp các giá trị thuộc tính cho hoạt ảnh. Nếu tên không khớp với bất kỳ quy tắc keyframe
nào, thì không có thuộc tính nào được tạo hoạt ảnh và hoạt ảnh không được thực thi
Đặt thuộc tính này thành none
sẽ vô hiệu hóa hoạt ảnh một cách rõ ràng. Vì vậy, nếu thuộc tính này chứa giá trị của none
, thì không có hoạt ảnh nào được thực hiện ngay cả khi có quy tắc keyframe
với tên đó. Giá trị mặc định là ""
Ngoài ra, tất cả các thuộc tính CSS cũng chấp nhận các giá trị từ khóa trên toàn CSS sau đây làm thành phần duy nhất của giá trị thuộc tính của chúng
initial
Đại diện cho giá trị được chỉ định làm giá trị ban đầu của thuộc tính. inherit
Đại diện cho giá trị tính toán của thuộc tính trên cha của phần tử. @keyframes
0Giá trị này đóng vai trò là inherit
hoặc initial
, tùy thuộc vào việc tài sản có được thừa kế hay không. Nói cách khác, nó đặt tất cả các thuộc tính thành giá trị gốc của chúng nếu chúng có thể kế thừa hoặc thành giá trị ban đầu của chúng nếu không thể kế thừaThông tin tài sản cơ bản
Giá trị ban đầu none
Áp dụng cho tất cả các phần tử và các phần tử giả @keyframes
4 và @keyframes
5 Kế thừa?NoMediaVisual
Mã ví dụ
CSS cơ bản
Ví dụ hoạt động trong Tài liệu HTML
Thử nó
Thông số kỹ thuật CSS
- Thuộc tính này nằm trong CSS Animations Cấp 1 [Bản thảo của biên tập viên]
Hỗ trợ trình duyệt
Bảng dưới đây do Caniuse cung cấp. com hiển thị mức độ hỗ trợ của trình duyệt cho tính năng này
Tiền tố nhà cung cấp
Để tương thích tối đa với trình duyệt, nhiều nhà phát triển web thêm các thuộc tính dành riêng cho trình duyệt bằng cách sử dụng các tiện ích mở rộng như @keyframes
6 cho Safari, Google Chrome và Opera [phiên bản mới hơn], @keyframes
7 cho Internet Explorer, @keyframes
8 cho Firefox, @keyframes
9 cho các phiên bản Opera cũ hơn, v.v. Như với bất kỳ thuộc tính CSS nào, nếu trình duyệt không hỗ trợ tiện ích mở rộng độc quyền, trình duyệt sẽ đơn giản bỏ qua nó
Phương pháp này không được W3C khuyến nghị, tuy nhiên, trong nhiều trường hợp, cách duy nhất bạn có thể kiểm tra một thuộc tính là bao gồm tiện ích mở rộng CSS tương thích với trình duyệt của bạn
Các nhà sản xuất trình duyệt lớn thường cố gắng tuân thủ các thông số kỹ thuật của W3C và khi họ hỗ trợ thuộc tính không có tiền tố, họ thường xóa phiên bản có tiền tố. Ngoài ra, W3C khuyên các nhà cung cấp nên xóa tiền tố của họ đối với các thuộc tính đạt trạng thái Đề xuất Ứng viên
Nhiều nhà phát triển sử dụng Autoprefixer, đây là bộ xử lý hậu kỳ cho CSS. Autoprefixer tự động thêm tiền tố của nhà cung cấp vào CSS của bạn để bạn không cần. Nó cũng loại bỏ các tiền tố cũ, không cần thiết khỏi CSS của bạn
Giá trị mặc định. không kế thừa. không có hoạt ảnh. không. Đọc về animatableVersion. Cú pháp CSS3JavaScript. mục tiêu. Phong cách. animationName="myNEWmove" Hãy dùng thử
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính
Các số theo sau -webkit-, -moz- hoặc -o- chỉ định phiên bản đầu tiên hoạt động với tiền tố
Thuộc tínhanimation-name43. 0
4. 0 -webkit-10. 016. 0
5. 0 -moz-9. 0
4. 0 -webkit-30. 0
15. 0 -webkit-
12. 0 -o-
Cú pháp CSS
tên hoạt hình. tên khung hình chính. không ai. ban đầu. thừa kế;
Giá trị tài sản
ValueDescriptionkeyframenameChỉ định tên của khung hình chính mà bạn muốn liên kết với giá trị selectornoneDefault. Chỉ định rằng sẽ không có hoạt ảnh [có thể được sử dụng để ghi đè hoạt ảnh đến từ tầng]initialĐặt thuộc tính này thành giá trị mặc định của nó. Đọc về khởi tạo Kế thừa thuộc tính này từ phần tử cha của nó. Đọc về thừa kế