CSS线性渐变动画在firefox

Question

目前我在一个学校项目的网站上工作。该网站必须在较新的浏览器上运行。

我想要一个动画，从中间到填充框。旁边的分隔线应该动画为。我使用高度时遇到了一些麻烦，所以我使用带有硬切的渐变来实现这一目标。 它适用于Edge，Chrome和IE10（！），但不适用于Firefox。

@keyframes expandtwo {
    from {
        background: linear-gradient(to bottom, 
        rgba(255,143,0,0) 40%, 
        rgba(255,143,0,1) 40%,
        rgba(255,143,0,1) 60%,
        rgba(255,143,0,0) 60%);
    }
    to {
        background: linear-gradient(to bottom, 
        rgba(255,143,0,0) 0%, 
        rgba(255,143,0,1) 0%,
        rgba(255,143,0,1) 100%,
        rgba(255,143,0,0) 100%);
    }
}

JSFiddle：https://jsfiddle.net/418wwn95/1/

我从Jquery中拯救了你，以实现分离的线条和完整的动画（120行，因为chrome太笨了而不能自己做）并将其最小化为起点和终点。仍然显示问题。