javascript - 使用 wow.js 和 animate.css 移动（翻译）css 动画

Question

我目前正在使用 wow.js 和 animate.css 来集成 CSS 动画（bounceUp、fadeIn 等），但如果我想使用 fadeIn 然后让图像向右平移 5em 我该怎么做？

Answer 1

说如果我想使用淡入淡出然后让图像向右平移 5em 我该怎么做

将正在动画的 div 包装在另一个 div 中，并将新动画应用于该新div

我fadeIn从animate.css文件中提取了关键帧来说明如何实现这一点

注意：我创建了一个名为的新动画slide并将其添加到新的 div 中，slider 下面有 id 片段

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