Come funziona animazione in CSS, concetto @keyframes come la base di una animazione CSS

Con i CSS è possibile creare animazioni complesse e gestirli in modo molto flessibile. Concetto della animazione in CSS si bassa su due elementi: una serie di fotogrammi chiave che si chiamnao @keyframes e parametri di cambiamenti nella animazione come tempo e nome.

Fotogrammi(@keyframes) in animazione coi CSS

Ecco un esempio del codice come vengono inseriti  fotogrammi chiave in una  animazione? nel nostro esemio vorrei che ellemnto della animazione vvera allargato da 100% a 200% :

@keyframes  animazione_prova {
    {0%
        width: 100px;
    }
    {100%
        width: 200px;
    }
}

Animazione utilizzata  nell'esempio sopra ho chimato animazione_prova (il nome puo essere qualsiasi), e descrive come cambiera lo stile dall'inizio della animazione indicato con 0% fino al punto finale  indicato come 100%. Questa animazione può essere applicata a qualsiasi elemento basta aagiungere ad esso (ad elemento che vogliamo animare ) due proprietà di  CSS - animation-name (il nome dell'animazione) e animation-duration (periodo della animazione ) . Ad esempio:

.button {
    animation-name: animazione_prova;
    animation-duration: 2s;
}

Questo codice assegnerà la nostra  animazione ad elemento con la classe .button. Come risultato durante l'animazione elemento  aumenterà la sua larghezza da  100px a 200px in 2 secondi.

@keyframes: storyboard (sequenza di fotogrammi )

Per ogni animazione come abiamo gia visto dobiamo dare un nome e indicare fotogrammi chiave quella iniziale e finale, che vengono impostate o utilizzando le parole from e to (da un certo stato ad un certo stato ) o  valori da 0% a 100%.

Posiamo anche inserire e specificare le  fotogrammi chiave intermedi e il momento di loro azione viene indicata in valori percentuali .

Se non si imposta la fotogramma chiave iniziale, l'animazione verrà riprodotta o avra come inizio lo stato iniziale indicato nelle proprieta CSS di quetso elemento. .

Se non si imposta il fotogramma finale, dopo aver raggiunto l'ultimo passaggio intermedio, animazione proseguirà   nella direzione opposta fino allo stato iniziale dell'elemento.

I fotogrammi chiave all'interno di @keyframes  possono essere scritti in qualsiasi ordine, ma è meglio elencarli in ordine cronologico dal più piccolo al più grande (come valore percentuale ).

La durata della animazione animation-duration  si imposta in secondi o millisecondi, ad esempio: 10s, 100 ms.

 

@keyframes: con  from e to

Come descritto sopra i fotogrammi chiave iniziale e finale possono essere  definite da parole from e to o valori da  0% a 100%.

E fotogrammi chiave intermedi possono essere specificati solo in percentuale. Ecco un animazione esempio di 4 fotogrammi:

@keyframes colorazione {
  from {background-color: red; }
  33% {background-color: yellow; }
  66% {background-color: verde; }
  to {background-color: blue; }
}
.button {
    animation-name: colorazione;
    animation-duration: 4s;
}

Raggruppamento di @keyframes

I fotogrammi chiave o @keyframes  possono essere raggruppati, per questo è necessario elencarli separati da virgole. Vediamo il seguente esempio:

@keyframes stretching {
    0%, 50% {
        width: 100px;
    }
    {100%
        width: 200px;
    }
}

In questo esempio i primi due fotogrammi sono raggruppati. Il cio significa che per la meta del tempo che imposteremo come durata dell'animazione, elemento nel mirino prima cambiare la sua larghezza arrivando a 100px e rimarrà in questo stato fino alla meta del tempo impostato ( da 0% a 50% del tempo della animazione come indicato )dopo di che si allarga  da 100px a 200px.

Qualcosa di divertente...

Ma posiamo indicare non solo valori interi ma anche anche quelli non interi come per esempio 50,001%. E indicando  due @keyframes come 50% e 50.001% con intervallo cosi ridotto posiamo produrrere dei effeti inaspettati come per esempio un cartello in stile neon con dei guasti quelli che posiamo ogni tanto vedere in un film quando una lettera non funziona bene.

@keyframes toggleOpacity {
  50% { opacity: 1; } /* Turn off */
  50.001% { opacity: 0.4; }
  /* Keep off state for a short period */
  52.999% { opacity: 0.4; } /* Turn back on */
  53% { opacity: 1; }
}

Errore

404

Cliccare per aprire lo spoiler e vedere il codice sorgente

<style>
@import url('https://fonts.googleapis.com/css?family=Monoton');
#cartello { 
background-color: #111111; }
 #neon {
  padding: 40px;
  
}
#error, #code{
font-size: 75px!important;
  font-family: 'Monoton', cursive;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 80px red,0 0 30px FireBrick,0 0 6px DarkRed;
  color: red;
}
 #neon p { margin:0; }
#error:hover { text-shadow: 0 0 200px #ffffff,0 0 80px #008000,0 0 6px #0000ff; }
#code:hover { text-shadow: 0 0 100px red,0 0 40px FireBrick,0 0 8px DarkRed; }
#error {
  color: #fff;
  text-shadow: 0 0 80px #ffffff,0 0 30px #008000,0 0 6px #0000ff;
}
#error span {
  animation: upper 11s linear infinite;
}
#code span:nth-of-type(2) {
  animation: lower 10s linear infinite;
}
#code span:nth-of-type(1) {
  text-shadow: none;
  opacity:.4;
}
@keyframes upper {
  0%,19.999%,22%,62.999%,64%, 64.999%,70%,100% {
    opacity:.99; text-shadow: 0 0 80px #ffffff,0 0 30px #008000,0 0 6px #0000ff;
  }
  20%,21.999%,63%,63.999%,65%,69.999% {
    opacity:0.4; text-shadow: none; 
  }
}
@keyframes lower {
  0%,12%,18.999%,23%,31.999%,37%,44.999%,46%,49.999%,51%,58.999%,61%,68.999%,71%,85.999%,96%,100% {
    opacity:0.99; text-shadow: 0 0 80px red,0 0 30px FireBrick,0 0 6px DarkRed;
  }
  19%,22.99%,32%,36.999%,45%,45.999%,50%,50.99%,59%,60.999%,69%,70.999%,86%,95.999% { 
    opacity:0.4; text-shadow: none; 
  }
}
</style>
<div id="cartello">
    <div id="neon">
      <p id="error">E<span>r</span>rore</p>
      <p id="code">4<span>0</span><span>4</span></p>
    </div>
</div>
 
Letto 519 volte