Regola @keyframes

La regola @keyframes definisce i fotogrammi chiave dell'animazione. Un fotogramma chiave rappresenta le diverse proprietà del nostro elemento CSS, ad esempio la posizione, le dimensioni, il colore, ecc., che vengono applicate all'elemento in un momento specifico.

Sintassi

css@keyframes nome-animazione {
  fotogrammi-chiave
}

Esempio

Definiamo i fotogrammi chiave:

html<div id="elem"></div>

css@keyframes anim {
  from {
    margin-left: 0px;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation: anim 3s infinite;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Esempio

Ora spostiamo il nostro quadrato dall'alto verso il basso utilizzando un'animazione:

html<div id="elem"></div>

css@keyframes anim {
  from {
    margin-top: 0%;
  }
  to {
    margin-top: 10%;
  }
}

#elem {
  animation: anim 2s infinite;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Esempio

Aumentiamo la larghezza della nostra figura utilizzando un'animazione, impostando i punti chiave in percentuale:

html<div id="elem"></div>

css@keyframes anim {
  from {
    width: 10%;
  }
  to {
    width: 40%;
  }
}

#elem {
  animation: anim 2s infinite;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Esempio

Ora modifichiamo la trasparenza della nostra figura:

html<div id="elem"></div>

css@keyframes anim {
  from {
    background-color: #467CBC;
  }
  to {
    background-color: #C2DDFD;
  }
}

#elem {
  animation: anim 2s infinite;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Vedi anche