-1

I didn't asked about transform origin. I asked why the animation doesn't work on mozilla

I'm stuck doing some animation svg on Mozilla. What I have tried in Chrome the animation worked perfectly fine, but when I tested on mozilla it's doesn't work well. I have put the vendor prefix, still the animation doesn't work properly.

I can't share the svg because the line of code to share here is limited, So please check it out from the demo.

Here is the DEMO

CSS

.trans-animate {
        -webkit-transform: translate(-24%,9%);
                transform: translate(-24%,9%);
        -webkit-animation: wavedash 6s ease-out  infinite;
                animation: wavedash 6s ease-out  infinite;
      }

      @-webkit-keyframes wavedash {
        0% {
          -webkit-transform: translate(-28%,9%);
                  transform: translate(-28%,9%);
        }
        50% {
          -webkit-transform: translate(-42%,9%);
                  transform: translate(-42%,9%);
        }
        100% {
          -webkit-transform: translate(-20%,9%);
                  transform: translate(-20%,9%);
        }
      }

      .trans-animate2 {
        -webkit-transform:  translate(-38%,2%);
                transform:  translate(-38%,2%);
        -webkit-animation: wavedash2 10s ease-out  infinite;
                animation: wavedash2 10s ease-out  infinite;
      }

      @-webkit-keyframes wavedash2 {
        0% {
          -webkit-transform: translate(-28%,2%);
                  transform: translate(-28%,2%);
        }
        50% {
          -webkit-transform: translate(-5%,2%);
                  transform: translate(-5%,2%);
        }
        100% {
          -webkit-transform: translate(8%,2%);
                  transform: translate(8%,2%);
        }
      }

      .dolphin-loca {
            /*transform: translate(-166%,69%);*/
            -webkit-animation: dolphin 8s ease-out infinite;
                    animation: dolphin 8s ease-out infinite;
      }

      @-webkit-keyframes dolphin {
        0% {
          -webkit-transform: translate(-172%,40%);
                  transform: translate(-172%,40%);
        }
        50% {
          -webkit-transform: translate(-172%, -36%);
                  transform: translate(-172%, -36%);
        }
        65% {
          -webkit-transform: translate(-172%, -36%);
                  transform: translate(-172%, -36%);
        }
        80% {
          -webkit-transform: translate(-172%, -36%);
                  transform: translate(-172%, -36%);
        }
        100% {
          -webkit-transform: translate(-172%,40%);
                  transform: translate(-172%,40%);
        }
      }

      .text-dolphin {
        -webkit-animation: dolphin-button 8s ease-out infinite;
                animation: dolphin-button 8s ease-out infinite;
      }

      @-webkit-keyframes dolphin-button {
        0% {
          -webkit-transform: translate(-172%,40%);
                  transform: translate(-172%,40%);
          opacity: 0;
        }

        50% {
          -webkit-transform: translate(-123%, -60%);
                  transform: translate(-123%, -60%);
          opacity: 0;
        }
        65% {
          -webkit-transform:  translate(-123%, -60%);
                  transform:  translate(-123%, -60%);
          opacity: 1;
        }
        78% {
          -webkit-transform:  translate(-123%, -60%);
                  transform:  translate(-123%, -60%);
          opacity: 1;
        }
        85% {
          -webkit-transform:  translate(-162%, -60%);
                  transform:  translate(-162%, -60%);
          opacity: 0;
        }
        100% {
          -webkit-transform: translate(-172%,40%);
                  transform: translate(-172%,40%);
          opacity: 0;
        }
      }

      .closeEye {
          -webkit-animation: eye 1.5s cubic-bezier(.17,.67,.48,.84) infinite;
                  animation: eye 1.5s cubic-bezier(.17,.67,.48,.84) infinite;
      }


      @-webkit-keyframes eye {
        0% {
              -webkit-transform: translateY(0px) scaleY(1);
                      transform: translateY(0px) scaleY(1);
        }
        10% {
              -webkit-transform: translateY(265px) scaleY(0.05);
                      transform: translateY(265px) scaleY(0.05);
        }
        15% {
          -webkit-transform: translateY(170px) scaleY(0.4);
                  transform: translateY(170px) scaleY(0.4);
        }
        25% {
              -webkit-transform: translateY(85px) scaleY(0.7);
                      transform: translateY(85px) scaleY(0.7);
        }
        30% {
              -webkit-transform: translateY(85px) scaleY(0.7);
                      transform: translateY(85px) scaleY(0.7);
        }
        35% {
              -webkit-transform: translateY(170px) scaleY(0.4);
                      transform: translateY(170px) scaleY(0.4);
        }
        40% {
              -webkit-transform: translateY(255px) scaleY(0.1);
                      transform: translateY(255px) scaleY(0.1);
        }
        100% {
              -webkit-transform: translateY(0px) scaleY(1);
                      transform: translateY(0px) scaleY(1);
        }
      }
rene
  • 41,474
  • 78
  • 114
  • 152
Fiido93
  • 1,918
  • 1
  • 15
  • 22
  • 3
    `transform-origin` does not apply to SVG elements in Firefox if I recall correctly. No way to set those right in FF. This seems to point in the right direction: https://stackoverflow.com/questions/15139090/setting-transform-origin-on-svg-group-not-working-in-firefox - Actually, people seem to be gravitating towards `transform-box: fill-box` – somethinghere Sep 12 '17 at 13:58
  • The above comment is incorrect. The problem is that percentage values in `transform-origin` are treated differently in Chrome and Firefox. `"center"` counts as a percentage because it is defined as meaning `"50%"`. Firefox follows the spec. Chrome is the one that is wrong. – Paul LeBeau Sep 12 '17 at 16:36
  • @somethinghere i didn't asked about transform origin. I asked why the animation doesnt work on mozilla – Fiido93 Sep 12 '17 at 16:44
  • @Fiido93 Thats true, but this _might be why it does not work_. Regardless of who follows the spec, it does not work like that in FF. – somethinghere Sep 12 '17 at 17:01

1 Answers1

1

There are two reasons your animation doesn't work on Firefox.

  1. The primary reason is that you have @-webkit-keyframes rules, which work in Chrome, but you have no @keyframes rules, which Firefox needs. You need to include both variants.

  2. The second reason is related to the transform-origin difference between Firefox and Chrome.

Percentages in SVG files are relative to the viewport size (the dimensions of the SVG). That's what Firefox does. So translate(-172%,40%) is putting the dolphin way off the edge of the SVG.

Chrome is calculating percentages relative to the dimensions of the dolphin. That is not the correct behaviour.

If you want your animation to work in both browsers, you need to switch to using absolute pixel values in your transform rules (eg. 100px).

.dolphin-loca {
  -webkit-animation: dolphin 8s ease-out infinite;
  animation: dolphin 8s ease-out infinite;
}

@-webkit-keyframes dolphin {
  0% {
    transform: translate(-300px, 100px);
  }
  50% {
    transform: translate(-300px, -100px);
  }
  65% {
    transform: translate(-300px, -100px);
  }
  80% {
    transform: translate(-300px, -100px);
  }
  100% {
    transform: translate(-300px, 100px);
  }
}

@keyframes dolphin {
  0% {
    transform: translate(-300px, 100px);
  }
  50% {
    transform: translate(-300px, -100px);
  }
  65% {
    transform: translate(-300px, -100px);
  }
  80% {
    transform: translate(-300px, -100px);
  }
  100% {
    transform: translate(-300px, 100px);
  }
}
<svg x="0px" y="0px" width="1600px" height="450.39px" viewBox="0 0 1600 450.39">
  <g id="Layer_7" class="dolphin-loca" >
    <path id="XMLID_29_" fill="#0083B7" d="M805.419,255.439c0-44.307-28.647-75.028-71.876-79.144 c1.21-4.736,2.37-7.935-2.083-7.935c-3.665,0-8.222,3.306-11.537,7.72c-44.529,2.807-74.611,34.122-74.611,79.359 c0,12.658,2.772,23.054,7.724,31.504c-4.966,9.543-5.992,22.504-1.546,28.282c5.617,7.3,8.705-3.645,17.415-11.529 c15.167,10.519,32.232,14.748,56.46,14.748c2.102,0,4.185-0.033,6.248-0.098c-0.163,6.328-2.354,13.155-7.468,20.396 c-3.842-5.743-20.614-27.065-47.537-8.519c-1.583,1.09,17.322,28.912,44.758,12.288c-0.328,0.717-0.755,2.152,1.434,1.581 c-4.001,6.03-9.983,19.613,5.826,32.179c1.107,0.88,16.966-18.865-2.171-34.437c5.641-3.797,16.995-12.42,26.062-25.462 c13.228-2.205,20.431-6.272,29.324-12.662c8.699,7.883,11.786,18.811,17.4,11.515c4.446-5.778,3.42-18.739-1.546-28.282 C802.648,278.493,805.419,268.097,805.419,255.439z M725.366,314.436c-44.229,0-74.917-14.978-74.917-59.207 s30.688-74.401,74.917-74.401c44.229,0,74.917,30.172,74.917,74.401S769.595,314.436,725.366,314.436z" />
  </g>
</svg>
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181