Animazioni con CSS3 – Animate

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
seo plugin e-max.it

Graficatelli fiorella locatelli web designer

Autore: Fiorella Locatelli

Digital Marketing e Social Media manager, si occupa di SEO e online brand communication.
Visita i canali social: Facebook, Twitter o LinkedIn.


Graficatelli © 2018 - Blog di Web design. CF: LCTFLL89H47A246A

Tel: (+39) 340 80 59 892 - Email: info@graficatelli.it

sitemap | privacy | cookies