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上运行，原因有二。

主要原因是您拥有template <class Cont> void erase_adjacent_duplicate(Cont& cont) { cont.erase(std::unique(std::begin(cont), std::end(cont)), std::end(cont)); }规则，这些规则适用于Chrome，但您没有@-webkit-keyframes规则，Firefox需要这些规则。您需要包含两种变体。
第二个原因与Firefox和Chrome之间的@keyframes差异有关。

SVG文件中的百分比与视口大小（SVG的尺寸）有关。这就是Firefox的功能。所以transform-origin将海豚的方式放在了SVG的边缘。

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

如果您希望动画在两种浏览器中都有效，则需要切换到使用translate(-172%,40%)规则中的绝对像素值（例如transform）。

＆＃13;

100px

＆＃13;

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

＆＃13;

mozilla中的动画无法正常工作

1 个答案: