animate.css анимация управление скоростью

Question

Я пытаюсь контролировать скорость анимации в animate.css, вот мой код, но, к сожалению, я не могу этого сделать.

Может ли кто-нибудь объяснить, как я могу это контролировать?

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

Answer 1

Вы должны определить animation-duration на .slideOutLeft:

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

Или сокращенная (со всеми префиксы браузеров):

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

Более подробную информацию можно найти here

Answer 2

См. CSS Animation Duration/CSS Transition Duration для обработки продолжительности. Существует также анимация/задержка перехода для задержки.

Answer 3

Вы можете изменить продолжительность анимации по всему миру с помощью .animated класса. Например, здесь я изменил его на 0.6s и работал хорошо для меня:

.animated { 
    -webkit-animation-duration: 0.6s; 
    animation-duration: 0.6s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
} 

Answer 4

Ну, глядя на документацию animate.css он просто говорит, что вы можете сделать это:

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

См: https://github.com/daneden/animate.css#usage