html - Animation in mozilla doesn't work properly -
i didn't asked transform origin. asked why animation doesn't work on mozilla
i'm stuck doing animation svg on mozilla. have tried in chrome animation worked fine, when tested on mozilla it's doesn't work well. have put vendor prefix, still animation doesn't work properly.
i can't share svg because line of code share here limited, please check out demo.
here 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 2 reasons animation doesn't work on firefox.
the primary reason have
@-webkit-keyframesrules, work in chrome, have no@keyframesrules, firefox needs. need include both variants.the second reason related
transform-origindifference between firefox , chrome.
percentages in svg files relative viewport size (the dimensions of svg). that's firefox does. translate(-172%,40%) putting dolphin way off edge of svg.
chrome calculating percentages relative dimensions of dolphin. not correct behaviour.
if want animation work in both browsers, need switch using absolute pixel values in 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>
Comments
Post a Comment