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

i'm using wow.js , animate.css intergrate css animations (bounceup, fadein, etc.) though if wanted use fadein have image translate right 5em how that?

say if wanted use fadein have image translate right 5em how that

wrap div being animated in div , apply new animation new div

i extracted keyframe fadein animate.css file illustrate how can achieve

note: created new animation called slide , added new div id slider snippet below

@charset "utf-8";  /*!  * animate.css -http://daneden.me/animate  * version - 3.5.0  * licensed under 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 {  {  opacity: 0;  }  {  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>