Переместить (перевести) анимацию css с помощью wow.js и animate.css

Question

В настоящее время я использую wow.js и animate.css для межсетевых CSS-анимаций (bounceUp, fadeIn и т. Д.), Хотя скажу, если бы я хотел использовать fadeIn, тогда изображение должно быть переведено справа на 5, как бы я это сделал?

Answer 1

сказать, если бы я хотел использовать FadeIn то есть изображение перевести в прямо 5em как бы я, что

Оберните DIV, который в настоящее время анимированный в другой DIV и применить новую анимацию к этому новый DIV

Я извлек ключевой кадр fadeIn из файла animate.css, чтобы проиллюстрировать, как вы можете достичь этого

Примечание: Я создал новую анимацию под названием slide и добавить его в новый DIV с идентификатором slider сниппет ниже

@charset "UTF-8"; 
 
/*! 
 
* animate.css -http://daneden.me/animate 
 
* Version - 3.5.0 
 
* Licensed under the MIT license - http://opensource.org/licenses/MIT 
 
* 
 
* Copyright (c) 2016 Daniel Eden 
 
*/ 
 
.animated { 
 
-webkit-animation-duration: 1s; 
 
animation-duration: 1s; 
 
-webkit-animation-fill-mode: both; 
 
animation-fill-mode: both; 
 
} 
 
.animated.infinite { 
 
-webkit-animation-iteration-count: infinite; 
 
animation-iteration-count: infinite; 
 
} 
 
.animated.hinge { 
 
-webkit-animation-duration: 2s; 
 
animation-duration: 2s; 
 
} 
 
.animated.flipOutX, 
 
.animated.flipOutY, 
 
.animated.bounceIn, 
 
.animated.bounceOut { 
 
-webkit-animation-duration: .75s; 
 
animation-duration: .75s; 
 
} 
 
@keyframes fadeIn { 
 
from { 
 
opacity: 0; 
 
} 
 
to { 
 
opacity: 1; 
 
} 
 
} 
 
.fadeIn { 
 
-webkit-animation-name: fadeIn; 
 
animation-name: fadeIn; 
 
} 
 
@keyframes slide{ 
 
    from{ 
 
    -moz-transform:translate(0,0); 
 
    -webkit-transform: translate(0,0); 
 
    -ms-transform: translate(0,0); 
 
    -o-transform: translate(0,0); 
 
    transform: translate(0,0); 
 
    } 
 
    to{ 
 
    -moz-transform:translate(5em,0); 
 
    -webkit-transform: translate(5em,0); 
 
    -ms-transform: translate(5em,0); 
 
    -o-transform: translate(5em,0); 
 
    transform: translate(5em,0); 
 
    
 
    } 
 
} 
 

 
#slider{ 
 
    position:relative; 
 
    display:inline-block; 
 
    animation:slide 1s forwards; 
 
}

<div id='slider'> 
 
<div class='animated fadeIn test'> 
 
Hello World 
 
</div> 
 
</div>