Regola @keyframes CSS

In CSS, la regola @keyframes può essere utilizzata per creare animazioni. La creazione di animazioni avviene attraverso la progressiva trasformazione da uno stile CSS a un altro, durante l'animazione è possibile modificare più volte le impostazioni dello stile CSS, utilizzando il percentuale specificato o i termini "from" e "to", che sono equivalenti a 0% e 100%, 0% rappresenta l'inizio dell'animazione, 100% rappresenta quando l'animazione è completata. Per ottenere il migliore supporto del browser, è sempre consigliabile definire i selettori per 0% e 100%.

@keyframes è una nuova regola aggiunta in CSS3, attualmente supportata da tutti i browser mainstream (con i prefissi corrispondenti) ma non è compatibile con i browser IE 9 e precedenti versioni.

Sintassi dell'uso della regola @keyframes

La sintassi di questa regola è la seguente:

@keyframes animationname {keyframes-selector {css-styles;}};

Spiegazione dei valori degli attributi

animationname：definire il nome dell'animazione;

keyframes-selector：percentuale di durata dell'animazione, valori possibili: 0-100%、from (uguale a 0%)、to (uguale a 100%)。Puoi usare un animation keyframes-selectors;

css-styles ：uno o più attributi CSS validi;

L'esempio seguente mostra le regole effettive di @keyframes.

　　　　　　.box　{
　　　　　　　　　　width:　50px;
　　　　　　　　　　height:　50px;
　　　　　　　　　　background:　red;
　　　　　　　　　　position:　relative;
　　　　　　　　　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　　　　-webkit-animation-name:　moveit;
　　　　　　　　　　-webkit-animation-duration:　2s;
　　　　　　　　　　
　　　　　　　　　　animation-name:　moveit;
　　　　　　　　　　animation-duration:　2s;
　　　　　　}
　　　　　　　
　　　　　　/*　Chrome,　Safari,　Opera　*/
　　　　　　@-webkit-keyframes　moveit　{
　　　　　　　　　　from　{left:　0;}
　　　　　　　　　　to　{left:　50%;}
　　　　　　}
　　　　　　　
　　　　　　
　　　　　　@keyframes　moveit　{
　　　　　　　　　　from　{left:　0;}
　　　　　　　　　　to　{left:　50%;}
　　　　　　}

Parametro

La tabella sottostante descrive i parametri di questa regola.

Compatibilità del browser

Compatibilità dei browser per l'attributo @keyframes, i numeri nella tabella sottostante rappresentano la versione minima del browser che supporta l'attributo; tutti i browser mainstream supportano questa regola.

Leggi di più

Si prega di consultare la seguente guida:Tipi di Media CSS.