Realizzare animazione in CSS con @keyframes

Сoncetto Animazione nel CSS3 è abbastanza semplice. Impostare il nome dell'animazione, quindi nel @keyframes si definisce l'elenco di movimenti e alla fine l'animazione viene collegata ad un elemento. Se ancora non hai lavorato con questa tecnologia allora in questo articolo cercherò di spiegartela.

Vorrei precisare che in questo articolo vediamo animazioni semplici perché esistono anche molto complessi. Con passaggi multipli soffisticati.

Animazione atraverso  @keyframe può essere multipla

Se abbiamo bisogno di cambiare il colore di sfondo, per esempio dall'arancione al nero con l'animazione keyframe per un periodo di  15 secondi quando si passa con  il cursore del mouse sull'elemento, l'algoritmo dividera l'intero processo di animazione in singoli fasi nel tempo ed eseguire una transizione graduale.

Vediamo un esempio

Creare un box con 400px di largezza e 200px di altezza come esempio, e atribuire a questo box id="box1" sara <div id="box1"></div>.E vediamo di creare animazione dove cambiaremo colori di sfondo per il  box creato. 

Passagi della animazione

a. nome della animazione "color-me-in"

b. animazione durrera 15s

c. al inizio impostiamo un colore e siamo a 0% come durata della animazione (primo keyframe)

d. alla fine un altro colore e come valore per il tempo saremo al 100% della durata (secondo e ultimo keyframe)

e. alla fine otteremo una animazione dove in 15 secondi il colore cambiera da arancione al nero, nel esempio ho agiunto valore "infinite" per fare la mia animazione infinita

 

#box1{
  background: black;
  animation: color-me-in 15s; /* posiamo agiungere "infinite" */
}
@keyframes color-me-in {
  /* possiamo chiamare "passo 1" */
  0% {  
    background: orange;
  }
  /* possiamo chiamare "passo 2" */
  100% {
    background: black;
  }
}

Animazione può avere tantisimi passagi

Passagi della animazione

a. nome della animazione "color-me-in2"

b. animazione durrera 15s

c. al inizio impostiamo un colore e siamo a 0% come durata della animazione (primo keyframe)

d. al meta del tempo preimpostto che corisponde a 50% del tempo totale inserimo un altro colore  (secondo keyframe)

e. e alla fine un altro colore e come valore per il tempo saremo al 100% della durata (terzo e ultimo keyframe)

f. alla fine otteremo una animazione dove in 15 secondi il colore cambiera da arancione(1 keyframe) al blu(2 keyframe) e puoi si trasforma in nero(3 keyframe), nel esempio ho agiunto valore "infinite" per fare la mia animazione infinita

@keyframes color-me-in2 {
  0% {
    background: orange;
  }
  /* aggiungo ancora un mezzo passo */
  50% {
    background: blue;
  }
  100% {
    background: black;
  }
}

Penso che il concetto della animazione semplice con la proprietà @keyframes avete capito abbiamo utilizzato la proprietà  background per dimostrazione ma la stessa cosa posiamo fare anche con gli altri proprietà CSS.

Passagi della animazione

a. nome della animazione "titolovolante"

b. animazione durrera 15s e sara infinita.

c. al inizio impostimo colore arancione per il testo  e siamo a 0% come durata della animazione (primo keyframe)

d. al meta del tempo  a 50% colore cambiera in arancione   (secondo keyframe)

e. e alla fine torna in nero come colore e aumentimo l-atezza del font fino a 50px per il tempo saremo al 100% della durata (terzo e ultimo keyframe)

f. alla fine otteremo una animazione dove in 15 secondi il colore cambiera da arancione(1 keyframe) al blu(2 keyframe) e puoi si trasforma in nero con aumento della altezza del font fino a 50px(3 keyframe),

 

#box3{
  color: black;
  font-size:23px;
  font-weight:900;
  animation: titolovolante  15s infinite;
}
@keyframes titolovolante {
  0% {
    color: orange;
  }
  /* aggiungo ancora un mezzo passo */
  50% {
    color: blue;
  }
  100% {
    color: black;
    font-size:50px;
  }
}
 
<div class="box3">Ciao sono animazione!</div>

 

Ciao sono animazione!

 

E un altro esempio con una immagine

Ho creato due box uno grande come lo sfondo con (position: relative;  width: 100%;  height: 350px; )per seguire il flusso dei elementi sulla pagina  e uno piu piccolo con la position: absolute; dove come lo sfondo ho inserito il palone. Dopo di che ho creato dei keyframe spostando secondo box con le proprieta left e bottom, distanziando gradualmente questo box da sinistra e combinando valori di distanza da sotto. Ho animato anche lo sfondo del box grande cosi come abbiamo fatto nei esempi sopra solo che ho usato gradiente al posto dei colori solidi.

@keyframes palone {
  0% {
    }
  
  30% {
    left: 20%;/* al 30 % del tempo trascorso spostarsi da sinistra per 20% della lungezza del box conetenitore */
    bottom: 75%;/* e spostarsi da sotto per 75% dal altezza del box contenitore */
    }
  50% {
    left: 40%;
    bottom: 15%;
    }
  70% {
   left: 70%;
    bottom: 45%;
    }  100% {
    left: 98%;
    }
}

Letto 1051 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso