Html mozilla中的动画没有'；我不能正常工作

我没有问关于变换原点的问题。我问为什么mozilla上的动画不起作用

我被困在Mozilla上做一些动画svg。我在Chrome上试过的动画效果非常好，但当我在mozilla上测试时，效果并不好。我已经添加了供应商前缀，但动画仍然不能正常工作

我无法共享svg，因为此处要共享的代码行有限，请从演示中查看

这是你的电话号码

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

---

您的动画在Firefox上无法运行有两个原因

主要原因是您有

@-webkit关键帧

规则，可以在Chrome中使用，但您没有Firefox需要的

@关键帧

规则。您需要包括这两个变体

---

第二个原因与Firefox和Chrome之间的差异有关

SVG文件中的百分比与视口大小（SVG的尺寸）相关。Firefox就是这么做的。因此，

translate（-172%，40%）

正在使dolphin远离SVG的边缘

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

如果希望动画在两种浏览器中都能工作，则需要切换到使用

变换

规则中的绝对像素值（例如

100px

）

。海豚失水事故{
-网络工具包动画：海豚8s放松无限；
动画：海豚8放松无限；
}
@-webkit关键帧海豚{
0% {
转换：转换（-300px，100px）；
}
50% {
转换：转换（-300px，-100px）；
}
65% {
转换：转换（-300px，-100px）；
}
80% {
转换：转换（-300px，-100px）；
}
100% {
转换：转换（-300px，100px）；
}
}
@海豚关键帧{
0% {
转换：转换（-300px，100px）；
}
50% {
转换：转换（-300px，-100px）；
}
65% {
转换：转换（-300px，-100px）；
}
80% {
转换：转换（-300px，-100px）；
}
100% {
转换：转换（-300px，100px）；
}
}

transform origin

如果调用正确，则不适用于Firefox中的SVG元素。无法在FF中设置正确的选项。这似乎指向了正确的方向：-事实上，人们似乎倾向于

变换框：填充框

上面的评论是不正确的。问题在于，Chrome和Firefox对

transform origin

中的百分比值的处理方式不同<代码>“中心”按百分比计算，因为它被定义为表示

“50%”

。Firefox遵循规范。Chrome是错误的。@这里我没有问关于转换起源的问题。我问为什么这部动画不适合我mozilla@Fiido93这是真的，但这可能就是它不起作用的原因。不管谁遵循规范，它在FF中都不会像那样工作。