Sử dụng định nghĩa khung hình ảnh động nội tuyến?

Question

Chúng tôi có loại này cú pháp để xác định khung quan trọng trong một file css:

@-webkit-keyframes fade { 
    from {opacity: 1;} 
    to {opacity: 0.25;} 
} 

và chúng tôi tham khảo nó thích:

.foo { 
    -webkit-animation: fade 1s linear infinite; 
} 

là có một cách để chỉ inline nó, như:

.foo { 
    -webkit-animation: (from {opacity: 1;} to {opacity: 0.25;}) 1s linear infinite; 
} 

Có cách nào để thực hiện điều đó hay đưa phần tử "@ -webkit-keyframe" vào biểu định kiểu của tôi khi chạy không?

Cảm ơn

Answer 1

Lấy một cái nhìn tại các W3C CSS Animations WD, cú pháp cho animation tài sản viết tắt là:

[<animation-name> || <animation-duration> || <animation-timing-function> || 
<animation-delay> || <animation-iteration-count> || <animation-direction> || 
<animation-fill-mode>] [, [<animation-name> || <animation-duration> || 
<animation-timing-function> || <animation-delay> || <animation-iteration-count> || 
<animation-direction> || <animation-fill-mode>] ]* 

Có nghĩa là nó chỉ mất các animation-name được sử dụng để chọn keyframe tại-quy tắc cung cấp các giá trị thuộc tính cho hoạt ảnh, theo sau là các tham số khác xác định cách thực thi các quy tắc này.

Hiện tại không có cú pháp viết tắt được xác định trong thông số kỹ thuật cho phép xác định một khung chính bên trong quy tắc, bạn phải tham chiếu một khung hiện có bằng cách sử dụng thuộc tính animation-name. Từ số specs:

Thuộc tính 'hoạt hình tên' xác định danh sách hoạt ảnh áp dụng. Mỗi tên được sử dụng để chọn khung hình chính quy tắc 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ỳ khung hình chính nào theo quy tắc, không có thuộc tính nào được làm động và hoạt ảnh sẽ không thực thi.