animer.css animation de contrôle de vitesse

Je suis en train de contrôle de la vitesse de l'animation dans animate.css, voici mon code, mais malheureusement, je suis incapable de le faire.

Quelqu'un peut-il expliquer comment je peux contrôler ce?

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

OriginalL'auteur Abdul Basit | 2015-05-05

  1. 20

    Vous devez définir les animation-duration sur le .slideOutLeft:

    .slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
}

    Ou l'abréviation (avec tous les préfixes de navigateur):

    .slideOutLeft {
  -webkit-animation: slideOutLeft 5s; /* Safari 4+ */
  -moz-animation:    slideOutLeft 5s; /* Fx 5+ */
  -o-animation:      slideOutLeft 5s; /* Opera 12+ */
  animation:         slideOutLeft 5s; /* IE 10+, Fx 29+ */
}

    Plus d'informations peuvent être trouvées ici

    OriginalL'auteur LinkinTED

  2. 5

    Vous pouvez changer l'animation de la durée à l'échelle mondiale pour le tout avec de .animation de la classe. Par exemple, ici, je l'ai changé à 0,6 s 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;
}
    Ce qui a le mieux fonctionné pour moi.

    OriginalL'auteur Arash Esmaeili

  3. 2

    Bien regarder la documentation de l'animer.css il 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

    OriginalL'auteur Alexander Kimaru

  4. 0

    Voir CSS Animation Durée /CSS Durée de la Transition pour la manipulation de la durée. Il y a aussi de l'animation et de transition-delay pour un retard.

    OriginalL'auteur mxlse

  5. 0

    Si vous n'aimez pas les modifier dans les fichiers CSS, vous pouvez modifier cet élément styles 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;
  }
});

    OriginalL'auteur StefansArya

  6. 0

    Animer.css a mis en œuvre certaines de contrôle de vitesse des classes:

    https://github.com/daneden/animate.css#slow-slower-fast-and-faster-class

    par défaut (pas de cours) = 1s

    lent = 2s

    plus lent = 3s

    rapide = 800ms

    plus rapide = 500ms

    Exemple d'utilisation:

    <p class="animated slideOutLeft faster">This will slide out with a duration of 500ms.</p>

    OriginalL'auteur ffffff