Html 如何设置条形图剪辑路径的动画？

我有一个条形图，在条形图上使用渐变背景。 渐变高度是恒定的，我使用剪辑路径只显示一部分的酒吧。这样，最暗的部分总是在100%的高度

我面临的问题是将每个条从0px高度设置为给定高度的动画

首先，我尝试使用动画、过渡和变换设置剪辑路径的动画。但是没有运气。然后我试着用动画来制作酒吧本身的动画，这有点效果。只是，它是自上而下而不是自下而上的

我怎样才能使这些条从底部展开

.barChart{清除：两个；高度：70px；宽度：170px；边框底部：实心2px#eee；}
.酒吧{
浮动：左；
保证金：4倍；
宽度：6px；
背景：线性梯度（到顶部，#8BC2CA 0%，#2E92A0 100%）；
动画：expandBar 2s轻松；
动画填充模式：正向；
}
.bar1{剪辑路径：插入（80%0 0圆1.5px 1.5px 0px 0px）；}
.bar2{剪辑路径：插入（20%0 0圆形1.5px 1.5px 0px 0px）；}
.bar3{剪辑路径：插入（60%0 0圆1.5px 1.5px 0px 0px）；}
.bar4{剪辑路径：插入（80%0 0 0圆1.5px 1.5px 0px 0px）；}
.bar5{剪辑路径：插入（20%0 0圆形1.5px 1.5px 0px 0px）；}
.bar6{剪辑路径：插入（60%0 0 0圆1.5px 1.5px 0px 0px）；}
.bar7{剪辑路径：插入（80%0 0 0圆1.5px 1.5px 0px 0px）；}
.bar8{剪辑路径：插入（20%0 0圆形1.5px 1.5px 0px 0px）；}
.bar9{剪辑路径：插入（60%0 0 0圆1.5px 1.5px 0px 0px）；}
@关键帧展开栏{
0% {
身高：0；
}
100%{
高度：60px；
}
}

<代码> >剪辑路径< /代码>，您可以考虑元素上的高度和渐变的固定大小。然后可以轻松地设置该高度的动画

动画的诀窍是使元素
内联块
（而不是浮动），并有一个隐藏的元素（使用伪元素设置），该元素将为
高度：100%
，以便在底部定义基线，使元素从底部而不是顶部进行动画


.barChart{
高度：70像素；
宽度：170px；
边框底部：实心2px#eee；
}
.柱状图：之前{
内容：“；
显示：内联块；
身高：100%；
}
.酒吧{
显示：内联块；
保证金：4倍；
宽度：6px；
背景：线性梯度（到顶部，#8BC2CA 0，#2E92A0 70px）；/*与高度相同：100%*/
动画：expandBar 2s轻松；
}
.bar1{高度：80%；}
.bar2{高度：20%；}
.bar3{高度：60%；}
.bar4{高度：70%；}
.bar5{高度：50%；}
@关键帧展开栏{
0% {
身高：0%；
}
}