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

Question

我试图复制的动画：

这里是正常速度：

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

基本上，它在text4 反弹一次，在text5 反弹一次。

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

这是我目前所拥有的：Fiddle

Answer 1

您可以制作类似重力的cubic-bezier 来模仿弹跳效果。您将在每个关键帧上应用此 cubic-bezier 来模拟现实生活中的重力等加速/减速。您可以使用this cubic-bezier generator 来创建您喜欢的加速/减速。

这是一个带有已编译 CSS 的可运行解决方案。这是the link with the SCSS code。

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

Answer 2

不完美但接近:) 总的来说，动画是这样的：Text1 -> Text 5 -> Text 4 -> Text 5 -> Inbetween 4 and 5 -> Text 5

这基本上是你的关键帧，我也为 50% 和 52% 添加了相同的翻译，这将使它在“文本 4”处停止一段时间

剩下的主要是调整数字。 （比如我把动画时间从 2s 改成了 3s）

.loading {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  opacity: 1;
  background-color: rebeccapurple;
  color: white;
  font-weight: bold;
  z-index: 13000;
  text-align: center;
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transition: all .35s ease-in-out;
  transition: all .35s ease-in-out;
}
.loading_carousel {
  font-size: 55.02px;
  line-height: 55.02px;
  height: 55.02px;
  position: relative;
  width: 100%;
  text-align: center;
}
.loading_options {
  position: relative;
}
.loading_options.rotate {
          animation: rotate 3s 1s linear infinite;
}
.loading_element {
  display: block;
  font-weight: 700;
}
.loading_shuffle {
  position: absolute;
  top: 0;
  left: 52%;
  text-align: left;
  height: 55.02px;
  overflow: hidden;
  margin-left: -25px;
  opacity: 1;
}
.loading_shuffle:before, .loading_shuffle:after {
  content: '';
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0)), to(#482078));
  background: linear-gradient(to top, rgba(0, 0, 0, 0), #482078);
  width: 100%;
  height: 15px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.loading_shuffle:after {
  top: auto;
  bottom: -3px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#482078));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #482078);
}

@keyframes rotate {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  25% {
    -webkit-transform: translateY(-220.08px);
            transform: translateY(-220.08px);
  }
  50%, 52% {
    -webkit-transform: translateY(-165px);
            transform: translateY(-165px);
  }

  80% {
    -webkit-transform: translateY(-195px);
            transform: translateY(-195px);
  }
  70%, 100% {
    -webkit-transform: translateY(-220.08px);
            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>