Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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;
}
like image 503
Abdul Basit Avatar asked May 05 '15 07:05

Abdul Basit


1 Answers

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;
}
like image 136
Arash Esmaeili Avatar answered Sep 17 '22 18:09

Arash Esmaeili