J'essaie de contrôler la vitesse d'animation dans animate.css
, voici mon code mais malheureusement, je ne peux pas le faire.
Quelqu'un peut-il expliquer comment je peux contrôler cela?
@-webkit-keyframes slideOutLeft {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes slideOutLeft {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft;
}
Vous pouvez modifier la durée de l'animation globalement pour tout avec la classe .animated. Par exemple, ici je l'ai changé en 0.6s et a bien fonctionné pour moi:
.animated {
-webkit-animation-duration: 0.6s;
animation-duration: 0.6s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
En regardant bien la documentation de animate.css, on dit simplement que vous pouvez faire ceci:
#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}
Si vous n'aimez pas modifier à partir des fichiers CSS, vous pouvez modifier ces styles d'élément directement avec javascript.
$.fn.extend({
animateCSS: function(animationName, callback, duration) {
var animationEnd = {
animation: 'animationend',
OAnimation: 'oAnimationEnd',
MozAnimation: 'mozAnimationEnd',
WebkitAnimation: 'webkitAnimationEnd',
};
for (var t in animationEnd)
if (this[0].style[t] !== undefined){
animationEnd = animationEnd[t];
break;
}
if(duration)
this.css('-webkit-animation-duration', duration+'s')
.css('animation-duration', duration+'s');
this.addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
if(duration)
$(this).css('-webkit-animation-duration', '')
.css('animation-duration', '');
if (typeof callback === 'function') callback();
});
return this;
}
});
Voir Durée de l'animation CSS / Durée de la transition CSS pour gérer la durée. Il y a aussi animation/transition-delay pour un delay.