SVG animation not working in Firefox, Safari and IE

Question

I have a SMIL SVG that works in all browsers(apart from IE, obviously). I wanted to pull out the animations from my SVG into CSS. Worked out well enough except now the SVG animation doesn't work in any browser, apartf from Chrome(obviously).

Here's the 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>

An here's the 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; }
}