用wow.js和animate.css移動（轉換）css動畫

Question

我正在使用wow.js和animate.css來整合CSS動畫（bounceUp，fadeIn等），但是如果我想使用fadeIn然後有5em圖像翻譯到右側，我會怎麼做？

Answer 1

說，如果我想使用淡入然後有圖像轉換爲 向右5em的我該怎麼做

環繞你的div在另一個DIV進行動畫和應用新的動畫到新格

我提取的關鍵幀fadeIn從animate.css文件說明如何實現這一

注：我創建了一個名爲slide新的動畫，並將其與ID添加到新的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>