Javascript 如何设置两个来回箭头的动画

我有一个带箭头的文本，使用

对比显示功能显示，如下所示：


功能对比度显示（文本）{
常量对比度=document.getElementById（“对比度”）；
contrast.innerHTML=`‹；${text}&›；`；
contrast.classList.add（“contrastShow”）；
contrast.classList.remove（“contrastHide”）；
}
对比显示（“周围有动画箭头的文本”）；
设置超时（（）=>{
//添加箭头动画
const arrows=document.queryselectoral（“.arrow”）；
arrows.forEach（arrow=>{
arrow.classList.add（“循环”）；
});
}, 2500);
。对比度容器{
溢出：隐藏；
高度：10vh；
宽度：100%；
z指数：11；
/*轮廓：0.1vw橙色虚线*/
}
.垂直中心对比度{
位置：绝对位置；
顶部：25vh；
填充顶部：10px；
保证金：0；
-ms转换：translateY（-50%）；
转化：translateY（-50%）；
}
.阿罗{
颜色：#e9e1f2；
}
.左箭头{
右：7vw；
}
.右箭头{
左：7vw；
}
.环路{
-webkit动画：前后2秒；
-webkit动画迭代计数：无限；
动画：前后2秒；
动画迭代次数：无限；
}
@-webkit关键帧前后{0%{left:0；}50%{left:58%；}100%{left:0；}
@前后关键帧{0%{left:0；}50%{left:100%；}100%{left:0；}
.对比{
位置：相对位置；
字体系列：“Vazir”；
方向：rtl；
文本阴影：1px1px2pRGBA（0,0,0,1）；
文本对齐：居中；
宽度：100%；
字体大小：2vw；
颜色：rgb（248247250）；
不透明度：0；
保证金：0自动；
}
#原创的{
过渡：不透明度1s缓进缓出；
}
.对比显示{
动画：对比动画显示0.3s轻松输入输出；
动画填充模式：正向；
}
.对比色皮革{
动画：对比动画HIDE 0.3s轻松输入输出；
动画填充模式：正向；
}
@-webkit关键帧对比动画显示{
0%{不透明度：0；顶部：4vh}
100%{不透明度：1；顶部：1.2vh}
}
@-webkit关键帧对比动画{
0%{不透明度：1；顶部：1.2vh}
100%{不透明度：0；顶部：4vh}
}


您希望动画的外观如何（翻转或旋转）？你试过什么没用的？您是否研究过希望动画看起来如何（翻转或旋转）？你试过什么没用的？你调查过吗