A volte come designer ci sentiamo in dovere di aggiungere delle piccole animazioni a dei widget, per alleviare l'attesa di una user experience magari troppo stantia in alcuni punti della nostra applicazione. Se utilizziamo jQuery, è possibile utilizzare animazioni in CSS senza sforzo tramite animate.css.
Disponibile con la facoltà di creare anche delle custom build alla pagina ufficiale, animate.css ci da la possibilità di animare i nostri widget, tramite stringhe come:
$('#yourElement').addClass('animated bounceOutLeft');
àˆ possibile anche cambiare la durata delle animazioni tramite il CSS stesso:
#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}
La libreria animate.css è disponibile per il download su GitHub, sotto licenza ☺.