14

I am trying to control animation speed in animate.css, here is my code but unfortunately I am unable to do so.

Can anyone explain how I can control this?

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

6 Answers 6

22

You need to define the animation-duration on the .slideOutLeft:

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

Or shorthand (with all browser prefixes):

.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+ */
}

More information can be found here

11

You can change animation duration globally for everything with .animated class. For example, here I changed it to 0.6s and worked well for me:

.animated {
   -webkit-animation-duration: 0.6s;
   animation-duration: 0.6s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
}
1
  • animation-duration does not work very well when changing anim speed dynamically in a looping animation Commented Sep 20, 2022 at 20:42
6

Animate.css has implemented some speed control classes:

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

default (no class) = 1s
slow = 2s
slower = 3s
fast = 800ms
faster = 500ms

Usage example:

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

Well looking at the documentation of animate.css it simply says you can do this:

#yourElement {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}

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

0

See CSS Animation Duration / CSS Transition Duration for handling the duration. There is also animation/transition-delay for a delay.

0

If you don't like modify from the CSS files, then you can modify that element styles directly with 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;
  }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.