web-dev-qa-db-fra.com

contrôle de la vitesse d'animation animate.css

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;
}
jqueryhtmlcsscss3animation
7
Abdul Basit

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;
}
4
Arash Esmaeili

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;
}

Voir: https://github.com/daneden/animate.css#usage

2
Alexander Kimaru

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;
  }
});
0
StefansArya

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.

0
mxlse