javascript - 使用 wow.js 和 animate.css 移动(翻译)css 动画

Question

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

Answer 1

say if I wanted to use fadeIn then have the image translate to the right by 5em how would I do that

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

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

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

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