Move (translate) css animation with wow.js and animate.css

Question

I'm currently using wow.js and animate.css to intergrate CSS animations (bounceUp, fadeIn, etc.) though say if I wanted to use fadeIn then have the image translate to the right by 5em how would I do that?

Answer 1

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

Wrap your div that is being animated in another div and apply a new animation to that new div

I extracted the keyframe fadeIn from the animate.css file to illustrate How you can achieve this

Note: I created a new animation called slide and added it to the new div with id slider snippet below

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