Joomla.it Forum

Joomla! 3 => Joomla! 3 => : pupito 30 Dec 2013, 09:17:15

: Come utilizzare animated css daneden?
: pupito 30 Dec 2013, 09:17:15

ciao, mi piacerebbe capire come inserire animazioni CSS3 con gantry. In particolare mi intereserebbero le animazioni http://daneden.github.io/animate.css/ (http://daneden.github.io/animate.css/) ..da quello che ho capito devo inserire il file custom-gantry.css nella cartella css del template e poi aggiungere la classe all'oggetto che voglio animare. Ma non riesco a capire cosa scrivere nel file css.
per fare effetto pulse pare il codice sia questo:

:

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
}

ma come farlo funzionare? e sopratutto come farlo funzionare con l'hover? di modo che l'effeto animazioni parta quando ci passo sopra col mouse? spero di essere stato chiaro ... grazie