SVG动画无法在Firefox，Safari和IE中运行

Question

我有一个适用于所有浏览器的SMIL SVG（显然除了IE之外）。我想把SVG的动画从CSS中拉出来。工作得很好，除了现在SVG动画在任何浏览器中都不起作用，而不是Chrome（显然）。

这是svg：

<svg width="135" height="140" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="#ddd">
    <rect class="sp-bars sp-e"  x="0" y="10" width="15" height="120" rx="6"></rect>
    <rect class="sp-bars sp-s"  x="30"  y="10" width="15" height="120" rx="6"></rect>
    <rect class="sp-bars sp-m"  x="60"  y="10" width="15" height="120" rx="6"></rect>
    <rect class="sp-bars sp-s"  x="90"  y="10" width="15" height="120" rx="6"></rect>
    <rect class="sp-bars sp-e"  x="120" y="10" width="15" height="120" rx="6"></rect>
</svg>

这是css：

.sp-e{
    animation: squeeze 1.2s 0.55s infinite;
    -webkit-animation: squeeze 1.2s 0.55s infinite;
    -moz-animation: squeeze 1.2s 0.55s infinite;
    -o-animation: squeeze 1.2s 0.55s infinite;
}

.sp-s{
    animation: squeeze 1.2s 0.30s infinite;
    -webkit-animation: squeeze 1.2s 0.30s infinite;
    -moz-animation: squeeze 1.2s 0.30s infinite;
    -o-animation: squeeze 1.2s 0.30s infinite;
}

.sp-m{
    animation: squeeze 1.2s 0s infinite;
    -webkit-animation: squeeze 1.2s 0s infinite;
    -moz-animation: squeeze 1.2s 0s infinite;
    -o-animation: squeeze 1.2s 0s infinite;
}

@keyframes squeeze {
    0%      { height: 120px; y: 10; }
    80%     { height: 40px; y: 50; }
    95%     { height: 140px; y: 0; }
    100%    { height: 120px; y: 10; }
}
@-webkit-keyframes squeeze {
    0%      { height: 120px; y: 10; }
    80%     { height: 40px; y: 50; }
    95%     { height: 140px; y: 0; }
    100%    { height: 120px; y: 10; }
}
@-moz-keyframes squeeze {
    0%      { height: 120px; y: 10; }
    80%     { height: 40px; y: 50; }
    95%     { height: 140px; y: 0; }
    100%    { height: 120px; y: 10; }
}
@-o-keyframes squeeze {
    0%      { height: 120px; y: 10; }
    80%     { height: 40px; y: 50; }
    95%     { height: 140px; y: 0; }
    100%    { height: 120px; y: 10; }
}