html - mozilla 中的动画无法正常工作

Question

我没有询问变换原点。我问为什么动画在 mozilla 上不起作用

我一直在 Mozilla 上做一些动画 svg。我在 Chrome 中尝试过的动画效果非常好，但是当我在 mozilla 上测试时效果不佳。我已经添加了供应商前缀，但动画仍然无法正常工作。

svg无法分享，因为这里分享的代码行有限，所以请从演示中查看。

这是 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);
        }
      }

Answer 1

您的动画在 Firefox 上不工作的原因有两个。

1. 主要原因是您有 @-webkit-keyframes 规则，它在 Chrome 中有效，但您没有 @keyframes 规则，而 Firefox 需要.您需要包括这两种变体。

2. 第二个原因与 Firefox 和 Chrome 之间的 transform-origin 差异有关。

SVG 文件中的百分比与视口(viewport)大小(SVG 的尺寸)相关。这就是 Firefox 所做的。所以 translate(-172%,40%) 让海豚远离 SVG 的边缘。

Chrome 正在计算相对于海豚尺寸的百分比。这不是正确的行为。

如果您希望您的动画在两种浏览器中都有效，您需要在 transform 规则中切换为使用绝对像素值(例如 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>