CSS在Firefox上歪斜了

Question

请看这里： https://jsfiddle.net/xpvt214o/52918/

body.loading-end #test::after {
            animation: skewAction 3s ease;
        }

@keyframes skewAction{
        0%{
            bottom: -100px;
            transform: skewY(0deg);
        }
        50%{
            bottom: -100px;
            transform: skewY(4deg);
        }
        100%{
            bottom: -200px;
            transform: skewY(0deg);
        }
}

在firefox中，skewY transoform动画正在制造一个小故障！ （Chrome / Safari工作正常）为什么我错过了什么。我尝试了css中的浏览器前缀但它没有改变任何东西。

是否可能有另一种可能轻易产生这种歪斜效果（svg？）。

示例（灰色条）：