Co oznacza "@" w tym oświadczeniu CSS?

Question

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

Co oznacza "@" i "100%"?

Answer 1

Są to reguły CSS3, które zostały zdefiniowane przez zespół programistów do tworzenia stron internetowych, przed formalną akceptacją w ramach specyfikacji CSS3 - dlatego włączenie opcji -webkit do selektora. Symbol @ wskazuje, że jest to reguła CSS, a nie standardowy selektor. @ -webkit-keyframes służy do określania klatek kluczowych dla właściwości animacji efektów wizualnych CSS.

Można zdefiniować dowolną liczbę klatek kluczowych w animacji; w przypadku, gdy podano tylko ostatnią klatkę kluczową (gdy 100% animacji jest kompletna) została zdefiniowana. The full syntax and documentation for these rules can be found here.

Na przykład, jeśli chcesz animację aby rozpocząć powoli, a następnie przyspiesza, podczas rozpoczęcia i zakończenia gładko, można ustawić klatki kluczowe pośrednie, które miały kroki nieliniowy stopnia obrotów:

@-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

"@" Deklaruje regułę "At" w arkuszu stylów. Z pewnością ma specjalne znaczenie w każdym przypadku.

"100%" odnosi się do końcowego stanu animacji CSS zdefiniowanej przez regułę @keyframes, lub w tym przypadku do reguły @ -webkit-keyframes. Musisz zadeklarować pierwsze (0%) i końcowe (100%) stany animacji, aby agent użytkownika wiedział, kiedy rozpocząć i zatrzymać animację.

Oto kilka: At-Rules są dyrektywami do silnika renderującego; rozszerzają składnię zestawu reguł CSS poza zwykłe bloki Selektora i Deklaracji. At-Rules są deklarowane przy użyciu słowa kluczowego At, które jest po prostu "@keyword", a następnie Deklaracja At-Rules odnosząca się do At-Keyword. Przykład: @charset "ISO-8859-15";

Opcjonalne argumenty mogą następować po słowie kluczowym At w zależności od typu instrukcji At-Rule. Przykład: ekran @media {color: # 000; }, gdzie screen jest opcjonalnym argumentem.