Seminario animazione nel web 2.0

Il seminario spiega come costruire animazioni per pagine web usando solo CSS, partendo dalla storia di questo tipo di effetti e arrivando alla gestione delle singole proprietà che governano il movimento: durata, ritardi, ripetizioni, direzione e stato di riproduzione. Si lavora sui fotogrammi chiave e sulla curva di velocità, e vengono mostrati alcuni effetti già pronti, dal rimbalzo allo scuotimento, da applicare agli elementi di una pagina. È pensato soprattutto per chi crea o aggiorna siti e interfacce, come sviluppatori front-end, web designer e docenti o studenti di informatica che devono rendere più chiari i contenuti con piccoli movimenti, senza appesantire il codice con script esterni.

• cenni storici sull’implementazione di animazioni nel web
• le proprietà transition e trasform
• i @keyframes
• il posizionamento dei @keyframes tramite percentuali
• la proprietà animation
• la curva dell’animazione
• caratteristiche della proprietà animation:
• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state
• esempi di animazioni automatiche:
• bounce
• flash
• pulse
• rubberBande
• shake
• swing
• tada
• wobble
• jello
• animazioni sottoposte a condizioni