Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Ott 25
CSS Animation e Keyframes

CSS Animation e Keyframes

  • 25/10/2017
  • Paolo Dell'Aguzzo
  • No Comments
  • CSS
  • animation, css, keyframe, website

In questo articolo ti voglio spiegare con un esempio cosa sono CSS animation e keyframes. Ho creato un esempio appositamente fatto per te.

Iniziamo col dire che, prima di spostarsi su animazioni e keyframes, sarebbe opportuno conoscere il CSS nelle sue basi altrimenti imparare diventa impossibile e ti ridurrai ad un insieme di copia/incolla.

CSS Animation e Keyframes

Partiamo dalla definizione di Animation e Keyframes.

Dopo di che impariamo a fare qualcosa di tanto bello quanto questo:

 

CSS Animation

Le animazioni del CSS ti permettono di dare vita e quindi animare elementi HTML senza l’utilizzo di JavaScript, jQuery o quant’altro.

Development Category (English)728x90

Lo scopo di una animazione è quello di darti la possibilità di cambiare per un numero infinito di volte lo stile che dai ad un elemento del tuo HTML.

Le animation funzionano attraverso i keyframes.

CSS Keyframes

I keyframes ci permettono di definire il cambiamento di stile nel tempo.

Una animation ha bisogno di aver indicato il keyframe di riferimento proprio perché è il keyframe che definisce la transizione degli stili.

Esempio CSS Animation e Keyframes

Vediamo il nostro esempio come è strutturato.

Abbiamo per prima cosa un po’ di HTML:

<div class="content-wrapper">
   <div class="mongolfiera"></div>
</div>

Ci sono 2 <div>:

  • Il primo fa da contenitore
  • Il secondo servirà per la mongolfiera

Il CSS

Dunque abbiamo un po’ di CSS. Vediamolo con ordine.

Per prima cosa definisco la classe “content-wrapper”:

.content-wrapper{
   width:600px;
   height:400px;
   background:url(https://www.paolodellaguzzo.com/wp-content/uploads/2017/10/mountainsmile.png) no-repeat bottom/100%;
}

Sto dando una larghezza ed un’altezza pre-impostata ed imposto come sfondo un’immagine che ho caricato nel mio spazio. Indico che l’immagine non va ripetuta e che si deve posizionare in basso con una dimensione del 100%.

Animation

A questo punto dobbiamo definire la classe “mongolfiera”:

.mongolfiera{
   width:70px;
   height:120px;
   background:url(https://www.paolodellaguzzo.com/wp-content/uploads/2017/10/hot-air-balloon.png) no-repeat top center/100%;
   animation: mongolfiera 60s ease infinite;
   position:relative;
   top:320px;
   left:30px;
}

Definisco in ordine:

  • La larghezza del <div>
  • L’altezza del <div>
  • Imposto lo sfondo che sarà il png di una mongolfiera. Non si dovrà ripetere, dovrà posizionarsi in alto nel suo spazio e centrato in orizzontale (top center) con una dimensione del 100%
  • Definisco l’animazione tramite animation.
    Inserisco il nome dell’animazione, “mongolfiera” (questo è il nome che avrà il keyframe!).
    La durata dell’animazione (animation-duration).
    La modalità dell’animazione (animation-timing-function): il valore “ease” è il default ed indica un’animazione che parte lenta, aumenta di velocità e si conclude lentamente.
    Il numero di iterazioni (animation-iteration-count) che definisce il numero di volte che si deve ripetere l’animazione, nel nostro caso “infinite”.
  • La posizione del <div> è “relative”
  • Di conseguenza possiamo impostare le proprietà “top” e “left”. Stiamo dando 320px di distanza dal “tetto” del <div> content-wrapper e 30px di distanza da sinistra.

Keyframe

Infine dobbiamo definire il keyframe “mongolfiera” impostato nella proprietà animation vista prima:

@keyframes mongolfiera {
   0% {
       left: 30px;
       top: 320px;
   }
   30% {
      left: 500px;
      top: 70px;
   }
   69% {
      left: 100px;
      top: 120px;
   }
   100% {
      left: 30px;
      top: 320px;
   }
}

Con la parola chiave @keyframes definiamo un keyframe che chiamiamo “mongolfiera”. Tale keyframe in ordine:

  • Imposta che la situazione al tempo 0, ovvero al 0% dell’animazione, ha le proprietà left e top impostate con i valori di 30 e 320 pixel.
  • Dunque al 30% dell’animazione stiamo dicendo che la mongolfiera dovrà avere la proprietà left pari a 500px e la proprietà top pari a 70px.
    Ciò sta ad indicare che, avendo impostato 60 secondi di durata dell’animazione, in 18 secondi il <div> deve spostarsi da sinistra verso destra di ben 470px (da left pari a 30px a left pari a 500px). Inoltre la mongolfiera si deve alzare passando da 320px di spazio dal tetto e salire fino a 70px dal tetto.
  • Dopo di che al 69% del tempo trascorso il <div> lo vogliamo spostare fino ad arrivare a sinistra con uno spazio dal bordo di 100px e si deve abbassare leggermente dando 120px di spazio dal tetto. Al 69% del tempo sono passati quindi 41 secondi circa.
  • Infine alla conclusione dei 60 secondi vogliamo che la mongolfiera si trovi in basso dove era partita.

Avendo definito l’animazione con un “animation-iteration-count” infinito, tale animazione continuerà infinitamente il suo percorso.

Altri impieghi

CSS animation e keyframes ci permettono non solo di far muovere gli elementi, ma anche di fargli cambiare colore, visibilità, opacità ed insomma modificare tutte le proprietà del CSS.

E’ possibile anche definire un cambio di colore e di posizione insieme, così come un cambio di colore e di opacità insieme. Sei libero di fare quello che vuoi.

Durante l’utilizzo del keyframe non sei obbligato a specificare un cambiamento in percentuale, ma puoi anche definire solo 2 stati con le keyword “from” e “to”. Ad esempio un colore che deve variare da rosso a blu così da simulare una sirena.

Se vuoi approfondire di più il discorso e vuoi migliorarti con il CSS scoprendo tutti i trucchi del mestiere ti consiglio questo libro che si legge velocemente, scorre bene e contiene tutto quello che cerchi.

Conclusioni

Non so te, ma a me piacciono tantissimo questi giochi con il CSS. Sono divertenti ed è possibile creare tante cose interessanti appesantendo meno il browser rispetto alle animazioni che si vedevano fino a qualche anno fa.

Le CSS animation e keyframes sono una grande innovazione per rendere ancora più dinamica una pagina e dare visivamente un’ottima impressione all’utente.

Di conseguenza ti consiglio alcuni articoli che ti potrebbero interessare:

  • CSS: Cos’è la specificity?
  • UX: Perché la User Experience è importante?
  • HotJar: Migliorare la User Experience gratis

Se vuoi iscriviti alla newsletter e non ti perderai i nuovi articoli. Mando da 1 a 4 mail al mese ricapitolando dove siamo arrivati con ogni guida. Con la newsletter hai anche accesso a libri ed ebook gratuiti, così come a coupon Udemy ? .

Per dubbi o domande scrivimi nei commenti ? .

Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!).

Commenti

Condividi:

  • Fai clic qui per condividere su Twitter (Si apre in una nuova finestra)
  • Fai clic per condividere su Facebook (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Tumblr (Si apre in una nuova finestra)
  • Fai clic qui per condividere su LinkedIn (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Pinterest (Si apre in una nuova finestra)
  • Fai clic per condividere su WhatsApp (Si apre in una nuova finestra)
  • Fai clic per condividere su Telegram (Si apre in una nuova finestra)
  • Clicca per condividere su Skype (Si apre in una nuova finestra)
  • Fai clic qui per stampare (Si apre in una nuova finestra)

Correlati

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail
Paolo Dell'Aguzzo

About The Author

Sono sempre stato affascinato dal marketing e dall'informatica a tal punto di unire le due passioni :) Se ti piace l'articolo fammelo sapere in un commento :)

Related Posts

    Fammi sapere cosa ne pensi :) Annulla risposta

    Impara ReactJS imparare react
    I 10 + 1 Libri che Dovrebbe Leggere Ogni Programmatore libri programmatore
    Newsletter

    Seguimi su Facebook :)

    Facebook Pagelike Widget
    Impara React Native imparare react native
    10 Cose per Stare Più Comodo in Ufficio stare più comodo in ufficio
    Impara a Creare un Tema Wordpress imparare creare tema wordpress
    Udemy I Migliori Corsi per Programmatori udemy corsi programmatori
    UX: Perché la User Experience è Importante UX importante e cos'è
    Metodologie Agili e Lean: Come migliorare la tua azienda metodologie agili
    Libri per Imparare JavaScript Imparare JavaScript libri

    Articoli recenti

    • I principali engine utilizzati per lo sviluppo di videogiochi
    • Dalla visione alla realtà: Lo sviluppo di videogiochi dal punto di vista di un programmatore
    • 8 consigli per migliorare la tua SEO Locale

    Categorie

    • CSS
    • Interviste
    • Java
    • Lavoro
    • Normative
    • Personale
    • Programmazione
    • Strategia & Marketing
    • Tech
    • Web Design
    • Wordpress
    Paolo Dell'Aguzzo
    Programmatore Software - Marotta di Mondolfo, Pesaro e Urbino
    P. IVA: IT02758450429
    Mail: info@paolodellaguzzo.com
    Via Litoranea, 284/C - Marotta (PU)
    Privacy Policy
    Cookie Policy
    In qualità di Affiliato Amazon, ricevo un guadagno per ciascun acquisto idoneo
    Amazon e il logo Amazon sono marchi registrati di Amazon.com, Inc. o delle sue affiliate
    Programmatore Senigallia, Ancona - Siti web, app iOS e Android, gestionali ReactJS, React Native, Java, SQL, PL/SQL, Heroku