Javascript 用动画填充文本

我试图得到一个CSS动画，使文本像它的液体填充。我遵循了一个示例（），但我需要的是对文本（而不是圆）执行相同的操作

我可以只用CSS吗？我不需要将文本的百分比与文本的填充量相关联。我的意思是，如果我写73%，我不需要自动填充，直到73%的容量

#横幅{
宽度：300px；
高度：300px；
位置：相对位置；
背景：#ccc；
边界半径：50%；
溢出：隐藏；
}
#横幅：：之前{
内容：''；
位置：绝对位置；
背景#ff0019；
宽度：100%；
底部：0；
动画：向前擦拭5s立方贝塞尔（.2、.6、.8、.4）；
}
@关键帧擦除{
0% {
身高：0；
}
100% {
身高：73%；
}
}

---

73%

这里的文字充满液体。 在Chrome中效果很好，但在Firefox中需要调整

#横幅{
位置：相对位置；
溢出：隐藏；
字体系列：无衬线；
字号：40pt；
字体大小：粗体；
背景：#ccc
}
.内部{
背景：#000；
颜色：#fff；
混合模式：倍增；
}
#横幅：：之前{
内容：''；
位置：绝对位置；
背景：#0f0；
宽度：100%；
底部：0；
动画：向前擦拭5s立方贝塞尔（.2、.6、.8、.4）；
}
@关键帧擦除{
0% {
身高：0；
}
100% {
身高：73%；
}
}

73%

我认为这可能是您想要的更多内容：svg ONE可能必须将其与淘汰文本相结合：此解决方案非常适合我！！！我将尝试为Firefox修复它（并查看它在Explorer中的工作方式），但谢谢您。