Che cosa significa "@" in questa dichiarazione CSS?

Question

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

Che cosa significa "@" e "100%"?

Answer 1

Queste sono regole CSS3 che sono state definite dal team di sviluppo del webkit, in anticipo rispetto all'accettazione formale come parte della specifica CSS3, quindi l'inclusione di -webkit nel selettore. Il simbolo @ indica che questa è una regola CSS, piuttosto che un selettore standard. @ -webkit-keyframes serve per specificare i fotogrammi chiave per le proprietà di animazione degli effetti visivi CSS.

È possibile definire tutti i fotogrammi chiave desiderati per l'animazione; nel caso in cui hai dato solo il fotogramma chiave finale (quando il 100% dell'animazione è completo) è stato definito. The full syntax and documentation for these rules can be found here.

Per esempio, se si voleva l'animazione di iniziare lentamente e poi accelera, mentre inizio e fine senza intoppi, è possibile impostare i fotogrammi chiave intermedi che hanno avuto passaggi non lineari in grado di rotazione:

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

Il simbolo "@" dichiara una regola At nel foglio di stile. Ha sicuramente un significato speciale, in ogni caso.

Il "100%" fa riferimento allo stato finale dell'animazione CSS definito dalla regola @keyframes o, in questo caso, alla regola @ -webkit-keyframes. In realtà devi dichiarare i primi (0%) e finali (100%) stati dell'animazione in modo che l'agente utente sappia quando avviare e interrompere l'animazione.

Ecco qualcosa di più: Le regole sono regole per il motore di rendering; estendono la sintassi dei set di regole CSS oltre i normali blocchi Selector e Declaration. Le regole di ingresso sono dichiarate con una parola chiave At, che è semplicemente "@keyword", seguita da un'istruzione At-Rules relativa alla parola chiave utilizzata. Esempio: @charset "ISO-8859-15";

Gli argomenti facoltativi possono seguire la parola chiave At a seconda del tipo di istruzione At-Rule. Esempio: @media screen {color: # 000; }, dove lo schermo è l'argomento facoltativo.