Regola CSS @keyframes

Definizione e uso

Puoi creare animazioni attraverso la regola @keyframes.

Il principio di creazione dell'animazione è, gradualmente trasformare un set di stili CSS in un altro set di stili.

Durante il processo dell'animazione, puoi cambiare più volte questo set di stili CSS.

Definisci il momento in cui avviene il cambiamento in percentuale, o attraverso i termini chiave "from" e "to", equivalente a 0% e 100%.

0% è il momento di inizio dell'animazione, 100% è il momento di fine dell'animazione.

Suggerimento:Per ottenere il miglior supporto del browser, dovresti sempre definire i selettori 0% e 100%.

Suggerimento:Usa le proprietà dell'animazione per controllare l'aspetto dell'animazione e lega l'animazione al selettore.

Attenzione:!important regola è ignorata nei frame chiave (vedere l'ultimo esempio di questa pagina).

Vedere anche:

Corso CSS3:Animazione CSS3

Esempio

Esempio 1

Far muovere uniformemente verso il basso l'elemento div:

@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}

Prova personalmente

Esempio 2

Aggiungere più selettori di keyframe in un'animazione:

@keyframes mymove {
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}

Prova personalmente

Esempio 3

Modificare più stili CSS in un'animazione:

@keyframes mymove {
  0%   {top: 0px; background: red; width: 100px;}
  100% {top: 200px; background: yellow; width: 300px;}
}

Prova personalmente

Esempio 4

Selezionatori di keyframe con più stili CSS multipli:

@keyframes mymove {
  0%   {top: 0px; left: 0px; background: red;}
  25%  {top: 0px; left: 100px; background: blue;}
  50%  {top: 100px; left: 100px; background: yellow;}
  75%  {top: 100px; left: 0px; background: green;}
  100% {top: 0px; left: 0px; background: red;}
}

Prova personalmente

Esempio 5

Attenzione:Le regole !important sono ignorate nei keyframes:

@keyframes myexample {
  from {top: 0px;}
  50%  {top: 100px !important;} /* Ignorato */
  to   {top: 200px;}
}

Prova personalmente

Sintassi CSS

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

Valore dell'attributo

Valore Descrizione
animationname Obbligatorio. Definire il nome dell'animazione.
keyframes-selector

Obbligatorio. Percentuale della durata dell'animazione.

Valori validi:

  • 0-100%
  • from (ugualmente a 0%)
  • to (ugualmente a 100%)
css-styles Obbligatorio. Un o più attributi CSS validi.

Supporto del browser

Chrome IE / Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-