CODEWITHSUNDEEP
jqueryhtmlcssanimation
Abdul Basit
Abdul Basit

Reputation: 169

animate.css animation speed control

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

Upvotes: 14

Views: 48772

Answers (6)

ffffff
ffffff

Reputation: 419

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>

Upvotes: 6

StefansArya
StefansArya

Reputation: 2898

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

Upvotes: 0

Alexander Kimaru
Alexander Kimaru

Reputation: 375

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

Upvotes: 2

Arash Esmaeili
Arash Esmaeili

Reputation: 179

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

Upvotes: 11

mxlse
mxlse

Reputation: 2784

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

Upvotes: 0

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

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

Upvotes: 22

Related Questions