"@" trong câu lệnh CSS này có nghĩa là gì?

Question

@-webkit-keyframes roll { 
    100% { -webkit-transform: rotate(360deg); } 
} 

Ý nghĩa "@" và "100%" là gì?

Answer 1

Đây là các quy tắc CSS3 đã được nhóm phát triển webkit xác định, trước khi được chấp nhận chính thức như một phần của đặc tả CSS3 — do đó bao gồm -webkit trong bộ chọn. Dấu @ chỉ ra rằng đây là một quy tắc CSS, chứ không phải là một bộ chọn chuẩn. @ -webkit-keyframes là để chỉ định khung hình chính cho các thuộc tính hoạt ảnh hiệu ứng trực quan CSS.

Bạn có thể xác định bao nhiêu khung hình chính tùy thích cho hoạt ảnh; trong trường hợp bạn chỉ đưa ra khung hình chính thức (khi hoàn thành 100% hoạt ảnh) đã được xác định. The full syntax and documentation for these rules can be found here.

Ví dụ, nếu bạn muốn các hình ảnh động để bắt đầu chậm và sau đó tăng tốc, trong khi bắt đầu và kết thúc suôn sẻ, bạn có thể thiết lập các khung hình chính trung gian mà có những bước phi tuyến ở mức độ quay:

@-webkit-keyframes roll { 
    25% { -webkit-transform: rotate(24deg); 
      -webkit-animation-timing-function: ease-in; 
     } 
    50% { -webkit-transform: rotate(72deg); } 
    75% { -webkit-transform: rotate(168deg); } 
    100% { -webkit-transform: rotate(360deg); 
     -webkit-animation-timing-function: ease-out; 
     } 
} 

Answer 2

Dấu "@" khai báo Nguyên tắc trong biểu định kiểu. Nó chắc chắn có ý nghĩa đặc biệt, trong mọi trường hợp.

"100%" là trạng thái cuối cùng của Hoạt ảnh CSS được xác định theo quy tắc @keyframes hoặc trong trường hợp này là quy tắc @ -webkit-keyframe. Bạn thực sự phải khai báo trạng thái đầu tiên (0%) và cuối cùng (100%) của hoạt ảnh để người dùng biết khi bắt đầu và dừng hoạt ảnh.

Dưới đây là một số chi tiết khác: Quy tắc tại là chỉ thị cho công cụ hiển thị; họ mở rộng cú pháp CSS Rule Set ngoài khối chọn và khối khai báo thông thường. Các quy tắc được tuyên bố bằng Từ khóa tại, chỉ đơn giản là "@keyword", theo sau là Tuyên bố tại quy tắc liên quan đến Từ khóa được sử dụng. Ví dụ: @charset "ISO-8859-15";

Đối số tùy chọn có thể thực hiện theo Từ khóa tùy thuộc vào loại tuyên bố tại quy tắc. Ví dụ: @media screen {color: # 000; }, trong đó màn hình là đối số tùy chọn.