Cerchi un modo semplice e cross-browser per rendere la vostra pagina web animata? Prova Animate.CSS!
Ottimo foglio di stile (CSS) per animare i tuoi contenuti web!
Tutto quello che dovete fare è visitare la seguente pagina e scegliere tue animazioni preferite:
1 – http://daneden.github.io/animate.css/
2 – eseguire il download del foglio animate.css.
3 – fare in modo che la vostra pagina web (es. index.html) richiami il codice, quindi prima della chiusura dell’ </head> inserire:
<link rel=”stylesheet” href=”css/animate.css” > prestando attenzione al percorso in cui avete salvato il vostro file CSS.
<head>
<link rel="stylesheet" href="animate.css">
</head>
4 – Per animare un oggetto nella vostra pagina sarà sufficiente applicare la classe animated ed il nome dell’animazione, per esempio:
<div class="animated bounce">
scegliendo il nome dell’animazione da questo elenco:
- bounce
- flash
- pulse
- rubberBand
- shake
- swing
- tada
- wobble
- bounceIn
- bounceInDown
- bounceInLeft
- bounceInRight
- bounceInUp
- bounceOut
- bounceOutDown
- bounceOutLeft
- bounceOutRight
- bounceOutUp
- fadeIn
- fadeInDown
- fadeInDownBig
- fadeInLeft
- fadeInLeftBig
- fadeInRight
- fadeInRightBig
- fadeInUp
- fadeInUpBig
- fadeOut
- fadeOutDown
- fadeOutDownBig
- fadeOutLeft
- fadeOutLeftBig
- fadeOutRight
- fadeOutRightBig
- fadeOutUp
- fadeOutUpBig
- flipInX
- flipInY
- flipOutX
- flipOutY
- lightSpeedIn
- lightSpeedOut
- rotateIn
- rotateInDownLeft
- rotateInDownRight
- rotateInUpLeft
- rotateInUpRight
- rotateOut
- rotateOutDownLeft
- rotateOutDownRight
- rotateOutUpLeft
- rotateOutUpRight
- hinge
- rollIn
- rollOut
- zoomIn
- zoomInDown
- zoomInLeft
- zoomInRight
- zoomInUp
- zoomOut
- zoomOutDown
- zoomOutLeft
- zoomOutRight
- zoomOutUp
- slideInDown
- slideInLeft
- slideInRight
- slideInUp
- slideOutDown
- slideOutLeft
- slideOutRight
- slideOutUp
