如何使用动漫 js 而不是 css 动画为句子设置动画？

Question

我想为一句话制作动画。我希望句子的最后一个词通过淡出然后显示另一个词来改变。

像这样：我喜欢冰淇淋（它们 'ice cream' 淡出并被 'cookies' 取代，然后是 'cake'）

我设法用 css 动画完成了这个，但我真的想用动画 js/javascript 来完成这个。

我知道如何使句子动画化，但不知道我会让单词与 javascript 或动漫 js 相互替换。

一些帮助或建议会很好 :)

<h1 class="sentence">I love
  <div class="slidingHorizontal">
      <span>ice cream</span>
      <span>blue</span>
      <span>candy</span>
      <span>dogs</span>
      <span>running</span>
  </div>
 </h1>

/*Horizontal Sliding*/
.slidingHorizontal{
    display: inline;
    text-indent: 8px;
}
.slidingHorizontal span{
    animation: leftToRight 12.5s linear infinite 0s;
    color: #00abe9;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}
.slidingHorizontal span:nth-child(2){
    animation-delay: 2.5s;

}
.slidingHorizontal span:nth-child(3){
    animation-delay: 5s;
}
.slidingHorizontal span:nth-child(4){
    animation-delay: 7.5s;
}
.slidingHorizontal span:nth-child(5){
    animation-delay: 10s;
}

/*leftToRight Animation*/
@-webkit-keyframes leftToRight{
    0% { opacity: 0; }
    5% { opacity: 0; -webkit-transform: translateX(-50px); }
    10% { opacity: 1; -webkit-transform: translateX(0px); }
    25% { opacity: 1; -webkit-transform: translateX(0px); }
    30% { opacity: 0; -webkit-transform: translateX(50px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

我试过像这样用anime js做动画：

anime({
        targets: 'h1',
        translateX: -20,
        opacity: 0,
        loop: true,
        easing: 'linear',
        duration: 2000
    });

请告诉我如何用动漫完成这个 js/javascript。 codepen

Answer 1

要实现这种效果，您需要使用 staggering and keyframes animation

anime({
  targets: '.slidingHorizontal span',
  keyframes: [
    {translateX: -50, opacity: 0, duration:0},
    {translateX: 0, opacity:1, duration:500},
    {translateX: 50, opacity:0,delay: 2000, duration:500},
  ],
  easing: 'linear',
  delay: anime.stagger(2500, {start: 0}),
  loop: true
});

/*Horizontal Sliding*/
.slidingHorizontal {
 display: inline;
 text-indent: 8px;
}
.slidingHorizontal span{
 color: #00abe9;
 opacity: 0;
 overflow: hidden;
 position: absolute;
}

<script src="https://animejs.com/lib/anime.min.js"></script>
<h1 class="sentence">I love
  <div class="slidingHorizontal">
      <span>ice cream</span>
      <span>blue</span>
      <span>candy</span>
      <span>dogs</span>
      <span>running</span>
  </div>
</h1>

如何使用动漫 js 而不是 css 动画为句子设置动画？

How to animate sentence with anime js instead of css animation?

javascript

css

animation

css-animations

anime.js