Javascript jQuery:不同文本长度的CSS文本动画

这是我的动画：

.ani span{
动画：动画1s无限；
显示：内联表；
}
@关键帧动画{
0% {
变换：translateY（0px）；
}
33.333% {
transform:translateY（-5px）；
}
66.666% {
变换：translateY（5px）；
}
100% {
变换：translateY（0px）；
}
}
.ani跨度：第n个孩子（1）{
动画延迟：.1s；
}
.ani跨度：第n个孩子（2）{
动画延迟：.2s；
}
.ani跨度：第n个孩子（3）{
动画延迟：.3s；
}
.ani跨度：第n个孩子（4）{
动画延迟：.4s；
}

您好

您可以这样做：

var div，aniDivs，i，j；
aniDivs=document.queryselectoral（“div.ani”）；
对于（变量i=0，len=aniDivs.length；i

.ani span{
动画：动画1s无限；
显示：内联表；
}
@关键帧动画{
0% {
变换：translateY（0px）；
}
33.333% {
transform:translateY（-5px）；
}
66.666% {
变换：translateY（5px）；
}
100% {
变换：translateY（0px）；
}
}
.ani跨度：第n个孩子（1）{
动画延迟：.1s；
}
.ani跨度：第n个孩子（2）{
动画延迟：.2s；
}
.ani跨度：第n个孩子（3）{
动画延迟：.3s；
}
.ani跨度：第n个孩子（4）{
动画延迟：.4s；
}

欢迎
这同样适用于任意长度的字符串


$aniDivs=$（'.ani'）；//收集所有具有“ani”类的div
//循环每个
$aniDivs.每个（函数（divIndex，div）{
//HTML部分
var divTxt=$（div.text（）；
//获取ani分区内的文本（即“hello”）
var lettersArr=divTxt.split（“”）；
//制作一个组成单词的字母数组（即[“h”、“e”、“l”、“l”、“o”]）
var spanContent=''；
//一个用来保存我们动态创建的跨度的桶
$。每个（字母R，函数（字母索引，字母）{
span内容+=''+字母+''；
});
//现在我们有你好
$（div.html（spanContent）；
//把它放在当前的ani中
//CSS部分
var延迟=0.1；
//现在，我们收集刚刚创建和附加的动画，并以渐进方式增加动画延迟
$（div）.find（'span'）。每个（函数）（span索引，span）{
$（span）.css（'animation-delay'，delay.toFixed（1）+'s'）；
delay=delay+0.1；//将每个后续div从上一个div移到.1秒
});
});
.ani span{
动画：动画1s无限；
显示：内联表；
}
@关键帧动画{
0% {
变换：translateY（0px）；
}
33.333% {
transform:translateY（-5px）；
}
66.666% {
变换：translateY（5px）；
}
100% {
变换：translateY（0px）；
}
}

Lopadotemachoselachogaleokraniolipsanodrim-hypotrimmatosilphioparaomelitokatakechymeokichlepikosshopphattopteralektryonoptekephallioglopeleiolagoiosiraiobaphetraganopterygon
你已经做得很好了。你现在到底想要什么？我会有不同的。。。使用不同的文本，需要一个jQuery函数来自动执行。你的意思是将一个工作分解为
thiYes，并自动添加一个合适的“动画延迟”。我试了很多次，但并没有达到预期效果。“拟合“动画延迟”只是一个基于你的字母数的算术级数have@Anna_B很高兴我能帮忙：）