animate.css impostare velocità animazioni

[eleumas]

animate.css impostare velocità animazioni

Qualcuno saprebbe indicarmi per favore come gestire la velocità delle animazioni su animate.css? Grazie.

[simo90]

Non so se ho capito bene, ma vuoi modificare la velocità dell'animazione?

Se è così dal file animate.css modifichi la riga

*-vendor-animation-duration: xs;
*
ed inserisci la durata che ti interessa. (per vendor si intende webkit, moz, ms..etc)

[eleumas]

Ok e fino qui ci sono riuscito. Ma in alcuni effetti questa dicitura non c'è. Per esempio nell'effetto bounceInLeft. Ti risulta? Chrome se non sbaglio è webkit giusto? Io devo solo modificare il tempo, il codice è già presente vero?

[simo90]

Si webkit è per Chrome e Safari.
La velocità viene impostata per tutte le animazioni all' inizio, all'interno di:

.animated { -webkit-animation-duration: 1s; }

quindi poi trovi la dichiarazione (animation-duration) solamente all'interno delle classi animazioni che vogliono avere durata differente da 1s.
In .bounceInLeft {} non trovi questa dichiarazione perché essendo la velocità dell'animazione uguale a 1s viene già assegnata in animated.
Praticamente .bounceInLeft è un sottoinsieme di .animated se non vengono dichiarate proprietà in .bounceInLeft vengono ereditate le proprietà da .animated.

Quindi per modificare la velocità basta che inserisci all'interno di

*.bounceInLeft { -webkit-animation-duration: xs; }

*Se mi sono spiegato male dimmelo pure