如何用动漫js而不是css动画动画句子？答案

【问题标题】：How to animate sentence with anime js instead of css animation?如何用动漫js而不是css动画动画句子？
【发布时间】：2019-04-26 13:51:49
【问题描述】：

我想在一个句子上创建一个动画。我希望句子的最后一个词通过淡出然后显示另一个词来改变。

像这样：我喜欢冰淇淋（它们的“冰淇淋”逐渐消失并被“饼干”取代，然后是“蛋糕”）

我设法用 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; }
}

我尝试用这样的动漫 js 来制作动画：

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

请告诉我如何使用动漫 js/javascript 来完成这项工作。 codepen

【问题讨论】：

标签： javascript css animation css-animations anime.js

【解决方案1】：

要实现这种效果，您需要使用 staggering 和 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>

【讨论】：