Mozilla中的动画无法正常工作 [英] Animation in mozilla doesn't work properly

查看：100
本文介绍了Mozilla中的动画无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我没有询问变形起源。我问为什么动画在mozilla上不起作用



我坚持在Mozilla上做一些动画svg。我在 Chrome 中尝试过的动画效果非常好，但当我在mozilla上测试时效果不佳。



我不能共享svg，因为这里共享的代码行数有限，所以我不能共享svg。请从演示中查看。



这是 DEMO



CSS 

  .trans-animate {
 -webkit-transform：translate（-24％，9％）; 
 transform：translate（-24％，9％）; 
 -webkit-animation：wavedash 6s缓解无限; 
动画：wavedash 6s缓解无限; 
} 
 
 @ -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缓解无限; 
动画：wavedash2 10s缓解无限; 
} 
 
 @ -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-动画：海豚8s缓和无限; 
动画：海豚8s缓解无限; 
} 
 
 @ -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 free-out infinite; 
动画：海豚按钮8s缓出无限; 
} 
 
 @ -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）无限; 
 animation：eye 1.5s cubic-bezier（.17，.67，.48，.84）无限; 
} 
 
 
 @ -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上运行的两个原因。


  1. 主要原因是您有 @ -webkit-keyframes 规则，这些规则可以在Chrome中使用，但是没有 @keyframes 规则，这是Firefox需要的。第二个原因与 transform-origin 之间的差异有关。

    2. Firefox和Chrome。


    SVG文件中的百分比与视口大小（SVG的大小）有关。这就是Firefox所做的。因此， translate（-172％，40％）会让海豚的方式离开SVG的边缘。



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



    如果您希望您的动画在两个浏览器中都能正常工作，则需要在中使用绝对像素值，转换规则（例如 100px ）。 

      .dolphin-loca {-webkit-animation：dolphin 8s ease-out infinite;动画：dolphin 8s缓解无限;} @  -  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 =0pxy = 0pxwidth =1600pxheight =450.39pxviewBox =0 0 1600 450.39> < g id =Layer_7class =dolphin-loca> < path id =XMLID_29_fill =＃0083B7d =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.581c-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.515 c4.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.401 c44.229,0,74.917,30.172,74.917,74.401S769.595,314.436,725.366,314.436z/> < / svg>


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

    解决方案

    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>

    这篇关于Mozilla中的动画无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆