Tên hoạt hình trong CSS là gì?

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ử. @keyframes0Giá 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ừa

Thô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ả @keyframes4 và @keyframes5 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ư @keyframes6 cho Safari, Google Chrome và Opera (phiên bản mới hơn), @keyframes7 cho Internet Explorer, @keyframes8 cho Firefox, @keyframes9 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ế

Các hoạt ảnh khác nhau trong CSS là gì?

Có bao nhiêu loại hoạt hình trong CSS?

Webkit hoạt hình là gì

Các khung hình chính trong CSS là gì?