Javascript 如何将淡入淡出添加到内部HTML？

当数组项在内部HTML中更改时，如何获得淡入淡出？我希望它淡出并消失，然后下一种语言出现

var langs=[“泰米尔语”、“印地语”、“卡纳达语”、“马来语”]；
var计数=0；
var langLength=langs.length；
var language=document.querySelector（“.language”）；
设置间隔（e=>{
计数=计数%langs.length；
var newcolor=langs[count]；
language.innerHTML=`${newcolor}`
计数=计数+1；
}, 1500);

语言{
字体大小：粗体；
}

这种语言

印度语是印度语。

您可以在CSS中使用无限动画。将动画的持续时间设置为用于

setinterval

的值

var langs=[“泰米尔语”、“印地语”、“卡纳达语”、“马来语”]；
var计数=0；
var langLength=langs.length；
var language=document.querySelector（“.language”）；
设置间隔（e=>{
计数=计数%langs.length；
var newcolor=langs[count]；
language.innerHTML=`${newcolor}`
计数=计数+1；
}, 1500);
语言{
字体大小：粗体；
动画：淡出1.5s无限；
}
@关键帧淡出{
0%,
100% {
不透明度：0
}
50% {
不透明度：1
}
}

这种语言是印度语。
谢谢。出于好奇，如果我想通过向上/向下滑动fadeIn/fadeOut来增强此动画，您建议我如何继续？@scientific_explorer不需要设置不透明度动画，您可以设置顶部位置的动画。