Html CSS反作用

在twitter上，当一条tweet获得喜欢/转发时，就会出现一个清晰的动画，显示这个数字在上升。我发现CSS也有类似的效果，但它使用了一种非常奇怪的方法：

div{
位置：相对位置；
宽度：20px；
高度：20px；
边框：1px纯黑；
溢出：隐藏；
}
部门：之后{
内容：attr（数据值）；
位置：绝对位置；
排名：0；
左：0；
线高：20px；
文本对齐：居中；
-webkit动画：循环10s线性；
动画：循环10秒线性；
}
@-webkit关键帧循环{
0%{页边距顶部：0px；}
9%{页边距顶部：0px；}
10%{利润率顶部：-20px；}
19%{利润率最高：-20px；}
20%{利润率最高：-40px；}
29%{利润率最高：-40px；}
30%{利润率最高：-60px；}
39%{利润率最高：-60px；}
40%{利润率最高：-80px；}
49%{利润率最高：-80px；}
50%{利润率最高：-100px；}
59%{利润率最高：-100px；}
60%{利润率最高：-120px；}
69%{利润率顶部：-120px；}
70%{利润率最高：-140px；}
79%{利润率最高：-140px；}
80%{利润率最高：-160px；}
89%{利润率顶部：-160px；}
90%{利润率最高：-180px；}
99%{利润率最高：-180px；}
100%{利润率顶部：-200px；}
}
@关键帧循环{
0%{页边距顶部：0px；}
9%{页边距顶部：0px；}
10%{利润率顶部：-20px；}
19%{利润率最高：-20px；}
20%{利润率最高：-40px；}
29%{利润率最高：-40px；}
30%{利润率最高：-60px；}
39%{利润率最高：-60px；}
40%{利润率最高：-80px；}
49%{利润率最高：-80px；}
50%{利润率最高：-100px；}
59%{利润率最高：-100px；}
60%{利润率最高：-120px；}
69%{利润率顶部：-120px；}
70%{利润率最高：-140px；}
79%{利润率最高：-140px；}
80%{利润率最高：-160px；}
89%{利润率顶部：-160px；}
90%{利润率最高：-180px；}
99%{利润率最高：-180px；}
100%{利润率顶部：-200px；}
}

---

通过切换一个类可以实现效果，我所做的是使用translateY使最后一个数字始终可见，当我添加另一个div时，切换到另一个使最后一个数字可见的类，然后删除该类

函数createNum（）{
设numb=document.querySelector（“.numb_list”）；
设rand=Math.floor（Math.random（）*6）；
让newNum=document.createElement（“div”）；
newNum.innerText=rand；
numb.classList.toggle（“开关”）；
numb.appendChild（newNum）；
setTimeout（函数（）{
numb.classList.toggle（“开关”）；
},1)
}

.numb\u容器{
高度：21px；
溢出：隐藏；
}
.麻木清单{
转换：translateY（计算（-100%+21px））；
过渡：0.2s线性变换；
}
.开关{
转换：translateY（计算（-100%+42px））；
过渡：无；
}

1.
添加到号码