Javascript 如何制作有弹性的文本旋转CSS

我尝试复制的动画：

此处为正常速度：

在这里，它的速度较慢，因此您可以更清楚地看到动画（我希望）

本质上，它在

text4

处反弹一次，在

text5

处反弹一次

我是动画新手，所以如果有人对如何实现这一点有任何建议，我将不胜感激

以下是我迄今为止所做的：

不完美，但很接近：） 总的来说，动画是这样的：Text 1->Text 5->Text 4->Text 5->介于4和5之间->Text 5

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

其余的主要是调整数字。（例如，我已将动画时间从2秒更改为3秒）

。正在加载{
宽度：100%；
身高：100%；
排名：0；
左：0；
位置：固定；
显示：-网络工具包盒；
显示器：flex；
-webkit框对齐：居中；
对齐项目：居中；
-webkit盒包：中心；
证明内容：中心；
不透明度：1；
背景色：丽贝卡紫；
颜色：白色；
字体大小：粗体；
z指数：13000；
文本对齐：居中；
-webkit变换原点：左；
变换原点：左；
-webkit过渡：所有.35都易于输入输出；
过渡：所有.35都易于输入输出；
}
.装货转盘{
字体大小：55.02px；
线高：55.02px；
高度：55.02px；
位置：相对位置；
宽度：100%；
文本对齐：居中；
}
.加载选项{
位置：相对位置；
}
。加载选项。旋转{
动画：旋转3s 1s线性无限；
}
.加载元素{
显示：块；
字号：700；
}
.加载\u shuffle{
位置：绝对位置；
排名：0；
左：52%；
文本对齐：左对齐；
高度：55.02px；
溢出：隐藏；
左边距：-25px；
不透明度：1；
}
.loading_shuffle:之前，.loading_shuffle:之后{
内容：''；
背景：-webkit渐变（线性，左下，左上，从（rgba（0,0,0,0）），到（#482078））；
背景：线性梯度（到顶部，rgba（0,0,0,0），#482078）；
宽度：100%；
高度：15px；
位置：绝对位置；
排名：0；
左：0；
z指数：2；
}
.加载\u shuffle:之后{
顶部：自动；
底部：-3px；
背景：-webkit渐变（线性，左上，左下，从（rgba（0,0,0,0）），到（#482078））；
背景：线性梯度（至底部，rgba（0,0,0,0），#482078）；
}
@关键帧旋转{
0% {
-webkit转换：translateY（0）；
变换：translateY（0）；
}
25% {
-webkit转换：translateY（-220.08px）；
转换：translateY（-220.08px）；
}
50%, 52% {
-webkit转换：translateY（-165px）；
转换：translateY（-165px）；
}
80% {
-webkit转换：translateY（-195px）；
变换：translateY（-195px）；
}
70%, 100% {
-webkit转换：translateY（-220.08px）；
转换：translateY（-220.08px）；
}
}

文本1
文本2
文本3
文本4
文本5

不完美但接近：） 总的来说，动画是这样的：Text 1->Text 5->Text 4->Text 5->介于4和5之间->Text 5

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

其余的主要是调整数字。（例如，我已将动画时间从2秒更改为3秒）

。正在加载{
宽度：100%；
身高：100%；
排名：0；
左：0；
位置：固定；
显示：-网络工具包盒；
显示器：flex；
-webkit框对齐：居中；
对齐项目：居中；
-webkit盒包：中心；
证明内容：中心；
不透明度：1；
背景色：丽贝卡紫；
颜色：白色；
字体大小：粗体；
z指数：13000；
文本对齐：居中；
-webkit变换原点：左；
变换原点：左；
-webkit过渡：所有.35都易于输入输出；
过渡：所有.35都易于输入输出；
}
.装货转盘{
字体大小：55.02px；
线高：55.02px；
高度：55.02px；
位置：相对位置；
宽度：100%；
文本对齐：居中；
}
.加载选项{
位置：相对位置；
}
。加载选项。旋转{
动画：旋转3s 1s线性无限；
}
.加载元素{
显示：块；
字号：700；
}
.加载\u shuffle{
位置：绝对位置；
排名：0；
左：52%；
文本对齐：左对齐；
高度：55.02px；
溢出：隐藏；
左边距：-25px；
不透明度：1；
}
.loading_shuffle:之前，.loading_shuffle:之后{
内容：''；
背景：-webkit渐变（线性，左下，左上，从（rgba（0,0,0,0）），到（#482078））；
背景：线性梯度（到顶部，rgba（0,0,0,0），#482078）；
宽度：100%；
高度：15px；
位置：绝对位置；
排名：0；
左：0；
z指数：2；
}
.加载\u shuffle:之后{
顶部：自动；
底部：-3px；
背景：-webkit渐变（线性，左上，左下，从（rgba（0,0,0,0）），到（#482078））；
背景：线性梯度（至底部，rgba（0,0,0,0），#482078）；
}
@关键帧旋转{
0% {
-webkit转换：translateY（0）；
变换：translateY（0）；
}
25% {
-webkit转换：translateY（-220.08px）；
转换：translateY（-220.08px）；
}
50%, 52% {
-webkit转换：translateY（-165px）；
转换：translateY（-165px）；
}
80% {
-webkit转换：translateY（-195px）；
变换：translateY（-195px）；
}
70%, 100% {
-webkit转换：translateY（-220.08px）；
转换：translateY（-220.08px）；
}
}

文本1
文本2
文本3
文本4
文本5

您可以制作一个重力像

立方贝塞尔

来模拟反弹效果。您将对每个关键帧应用此

立方贝塞尔

，以模拟像rea一样的加速/减速