Question

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

像这样：我喜欢冰淇淋（它们的“冰淇淋”逐渐淡出，并在“蛋糕”之后被“饼干”取代）

我设法通过CSS动画来完成此操作，但我真的很想使用动画js / javascript来做到这一点。

我了解了如何为句子添加动画效果，但是我不知道我会不会用javascript或anime 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

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

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

1 个答案: