Animation Bug in Firefox

Navigation
1

I created a svg and did a little upload animation in the style of a simple loader ... This animation works perfectly in Chrome, but in Firefox and Edge it contains some problems in the animation. In Edge the animation gets frozen, and in Firefox it's like she does not respect the rules of spin, and it all goes crazy on the 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);
    }
}

SVG HTML code: 

<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 not this way support other browsers besides Chrome?

    
asked by anonymous 06.02.2018 / 14:40

1 answer

0

Otavio, the Rule @Keyframes does not support most older browsers, so you have no idea or support for IE, just for Edge 10, ie old browsers will not even have support for animations . Already transforming it, it gives broader support for browsers, but is still quite limited to some older browsers.

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

To find out which browsers support transform click here .

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

    
06.02.2018 / 15:00
Set / select option in Spinner Store login and password - best option [closed]