Question

我目前正在使用wow.js和animate.css集成CSS动画（bounceUp，fadeIn等）虽然如果我想使用fadeIn然后将图像转换为右边5em我该怎么做？

Answer 1

如果我想使用fadeIn然后将图像转换为从5em开始我该怎么做

在另一个div中包装正在设置动画的div并将新动画应用于 new div

我从fadeIn文件中提取了关键帧animate.css，以说明如何实现此目标

注意：我创建了一个名为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>

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

1 个答案: