Javascript和css动画一直不同步

所以基本上，我的CSS动画应该模拟一些被键入、未键入并最终更改为另一个单词的文本。通常CSS keyframe和JavaScript setInterval是同步的，但在移动设备上，它们有时会不同步，或者如果我转到一个新选项卡，它们会取消同步

我们
引入
var i=0；
words=[“架构师”，“建造”，“设计”，“代码”，“开发”，“创新]；
setInterval（函数（）{
$（“#终端文本”）.text（字[i]）；
i++；
如果（i>字数.长度）{
i=0；
}
},3000);

#标题.横幅h1{
利润率：1米0.5米-10%；
填充：0；
颜色：白色；
文本对齐：左对齐；
}
@关键帧终端{
0%{最大宽度：0}
50%{最大宽度：100%}
55%{最大宽度：100%}
100%{最大宽度：0}
}
#标题#终端文本{
字体大小：粗体；
边缘：1米0.5米0；
填充：0；
动画：终端3s无限；
溢出：隐藏；
空白：nowrap；
右边框：4倍纯白；
文本对齐：左对齐；
}

您可以监听动画结束事件，而不用javascript中的

setInterval（）

。您的方法的问题是不能同时启动两个“计时器”（css/js）（您可以使用另一种方法），但这可以解决您的问题

var-wordIndex=0；
words=[“架构师”，“建造”，“设计”，“代码”，“开发”，“创新]；
var changeWord=函数（）{
$（“#终端文本”）.text（单词[wordIndex++]）；
};
var元素=document.querySelector（“终端文本”）；
元素。addEventListener（“animationiteration”，changeWord，false）；
//你们也可以在比赛开始时做一些特别的事情
//用您需要的任何功能替换changeWord
//元素。addEventListener（“animationstart”，changeWord，false）；
//animationend目前永远不会在代码中触发
//但也许你想在什么时候用它做点什么
//element.addEventListener（“animationend”，function（）{console.log（'animation end'）}，false）
#标题.横幅h1{
利润率：1米0.5米-10%；
填充：0；
颜色：白色；
文本对齐：左对齐；
}
@关键帧终端{
0%{最大宽度：0}
50%{最大宽度：100%}
55%{最大宽度：100%}
100%{最大宽度：0}
}
#标题#终端文本{
字体大小：粗体；
边缘：1米0.5米0；
填充：0；
动画：终端3s无限；
溢出：隐藏；
空白：nowrap；
右边框：4倍纯白；
文本对齐：左对齐；
}

我们
引入
这不是一个真正的答案，但更多的是一个建议，这让我想起了我不久前为此编写的两个简单的JS函数，
键入单词（）
和
删除单词（）
，我能够找到它。这并不能真正帮助你解决问题，但最终它可能会帮助你。它非常酷，甚至使用随机时间因子来模拟真实的打字


var span=document.getElementById（'text'）；
//添加一个右边框来模拟光标！
span.style.borderRight=“1px solid#000”；
键入单词（'develop'，span，function（）{
删除_字（范围，函数（）{
键入单词（'innovate'，span，function（）{
//全部完成，移除假光标！
span.style.borderRight=“0px”；
});
});
});
功能类型\字（字、容器、cback）{
container.innerHTML+=word.substring（0,1）；
如果（字长>1）{
var t=setTimeout（function（）{type_word（word.substring（1），container，cback）；}，50+Math.random（）*250）；
}
否则{
cback（）；
}
}
函数擦除_字（容器，cback）{
container.innerHTML=span.innerHTML.slice（0，-1）；
如果（container.innerHTML.length>0）{
var t=setTimeout（函数（）{erase_word（container，cback）；}，50+Math.random（）*50）；
}
否则{
cback（）；
}
}
我们