animate.css animation speed control

Question

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

Solution 1

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

Solution 2

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

Solution 3

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>

Solution 4

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

View more solutions

Comments

[jord8on]

This was EXACTLY what I needed! Thank you so much!!