Animation bug in Firefox

Question

I created a svg and made a little loading animation, in the style of a simple Download... This animation works perfectly in Chrome, but in Firefox and Edge there are some problems with the animation. In Edge the animation gets frozen, and in Firefox it’s as if she doesn’t respect the rules of spin, and gets all crazy on screen.

Css code

#Layer_1 {
    position: relative;
    top: 125px;
    left: 95%;
}
.loader {
    position: absolute;
    margin: auto;
    transform: translate(-50%,-50%);
    width: 420px;
}

.plane {
    animation: spin 3000ms linear infinite;
    fill: #FFF;
    transform-origin: 50% 50%;
}
@keyframes spin{
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

HTML code of the SVG:

<div id="loading" class="loader" style="display: block">
<svg id="Layer_1" data-name="Layer 1" viewBox="0 0 1920 260">
      <g class="plane">
           <path #caminho transform="translate(-871 -451.2)" style="fill: #1e73be"/>
           <path #caminho transform="translate(-871 -451.2)" style="fill: #1e73be"/>
           <path #caminho transform="translate(-871 -451.2)" style="fill: #1e73be"/>
           <path #caminho transform="translate(-871 -451.2)" style="fill: #1e73be"/>
           <path #caminho transform="translate(-871 -451.2)" style="fill: #1e73be"/>
      </g>
 </svg>

Does this way not support other browsers than Chrome?

Answer 1

Otavio, Rule @Keyframes does not support most older browsers, for you to have an idea, nor does it support IE, only for Edge 10, that is, older browsers will not even have support for animations. Already Transform, the same gives a wider support for browsers, but it is still quite limited to some older browsers.

Access this link for the complete list of browsers/versions that support Rule @Keyframe.

To find out which browsers support Transform click here.

In that website there are some examples of how to detect if the browser is old and perform the animation according to the support it provides,it is worth taking a look.