Javascript CSS中的生长条动画

是否可以在css中创建“成长条”动画

例如：

如果否，这是javascript的正确方法吗

window.addEventListener（“单击”，test（））；
i=0；
功能测试（）{
setTimeout（函数（）{
i+=5；
document.getElementById（'growing-bar'）。style.height=i+'px'；
如果（i这里有一个纯CSS解决方案：


div{
高度：10px；
宽度：50px；
背景：黑色；
动画名称：成长；
动画持续时间：3s；
动画计时功能：线性；
动画迭代次数：无限；
}
@关键帧增长{
100%{高度：100px；}；
}
您可以利用
变换原点
设置为
顶部
，
变换
设置为
0%，0%
，
变换
旋转

设置为

180度

用于垂直应用的

高度

动画；包括

向前

在

动画

声明中

#增长条{
背景：红色；
宽度：50px；
利润率：50像素；
位置：相对位置；
顶部：100px；
变换原点：顶部；
变换：平移（0%，0%）旋转（180度）；
动画：向前成长20秒；
}
@关键帧增长{
从{
高度：0px；
}
到{
高度：150像素；
}
}

---

你也想要那种分步式的动画还是平滑增长的动画？顺便问一下，答案是肯定的。这在CSS中是可行的。@timolawl是一种平滑的动画，很抱歉给你带来困惑。谢谢，你知道我应该采用哪种动画类型吗？翻译？哇，很有趣的方法，但这只是我的慢速机器还是条线没有线性增长？看起来很有趣ike结尾时速度变慢…这只是我吗？@Troxlrp尝试在堆栈片段的

css

前添加

linear

，请参见