javascript - 如何制作有弹性的文本轮播 CSS

Question

我试图复制的动画：

这里是正常速度：

这里速度较慢，所以你可以更清楚地看到动画（我希望）

本质上，它会在 反弹一次text4，然后在 反弹一次text5。

我是动画新手，所以如果有人对如何处理这个有任何建议，将不胜感激。

这是我到目前为止所拥有的：小提琴

标签： javascripthtmlcssanimationcss-animations

Answer 1

您可以制作类似重力的cubic-bezier效果来模仿反弹效果。您将在cubic-bezier每个关键帧上应用它来模拟现实生活中的重力等加速/减速。您可以使用这个三次贝塞尔生成器来创建您喜欢的加速/减速。

这是一个带有已编译 CSS 的可运行解决方案。这是SCSS 代码的链接。

.loading {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  color: white;
  font-weight: bold;
  text-align: center;
  transition: all .35s ease-in-out;
}
.loading_carousel {
  font-size: 55.02px;
  line-height: 55.02px;
  position: relative;
  width: 100%;
  text-align: center;
}
.loading_options {
  position: relative;
}
.loading_options.rotate {
  animation: 2s linear 1s infinite rotate;
  animation-delay: 2s;
}
.loading_element {
  display: block;
  font-weight: 700;
}
.loading_shuffle {
  text-align: center;
  height: 55.02px;
  overflow: hidden;
  mask: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, black 25%, black 75%, rgba(0, 0, 0, 0) 100%);
}

@keyframes rotate {
  0% {
    transform: translateY(0px);
    animation-timing-function: cubic-bezier(0.5, 0.36, 0.9, 0.83); /*Accelerate*/
  }
  30% {
    transform: translateY(-240.08px);
    animation-timing-function: cubic-bezier(0.17, 0.4, 0.33, 0.94); /*Decelerate*/
  }
  46.667% {
    transform: translateY(-165.06px);
    animation-timing-function: cubic-bezier(0.5, 0.36, 0.9, 0.83);
  }
  62% {
    transform: translateY(-220.08px);
    animation-timing-function: cubic-bezier(0.17, 0.4, 0.33, 0.94);
  }
  78% {
    transform: translateY(-198.072px);
    animation-timing-function: cubic-bezier(0.5, 0.36, 0.9, 0.83);
  }
  88%, 100% {
    transform: translateY(-220.08px);
  }
}

<div id="loading" class="loading">
  <div class="loading_carousel">
    <div class="loading_shuffle">
      <div class="loading_options rotate">
        <div class="loading_element">text1</div>
        <div class="loading_element">text2</div>
        <div class="loading_element">text3</div>
        <div class="loading_element">text4</div>
        <div class="loading_element">text5</div>
      </div>
    </div>
  </div>
</div>