I found a bunch of similar questions, but did not see a solution to the problem.

In general, for example, there is a button and it was asked to transition animation. Everything works, but it’s in chrome when you refresh the page that all the animations jump. For example, if the button has паддинги and the white color of the link is set, then when updating the page, the паддинги are animated from the standard to the specified sizes and the link color of the button from the standard blue or violet changes smoothly to white.

There is no such thing in the fox. you can set the animation only when :hover , and the problem goes away, but another one appears, when you remove the mouse from the button, it returns to the news \ to the standard specified sizes without animation.

 body { background-color:#2e3436; } a { color:#ccc; text-decoration:none; } /*---------/// UP BUTTON ///---------*/ .upbtn { position: fixed; bottom:30px; left:30px; display:block; transition: 0.3s; transition-timing-function:ease-in-out; } .upbtn:hover{ transform: rotate(1deg); bottom:34px; } .upbtn a { border-radius:0 14px 0 14px; border:1px solid #ccc; padding: 5px 15px; opacity:0.3; transition: 0.3s; transition-timing-function:ease-in-out; } .upbtn a:hover { text-decoration:none; background-color:#ccc; color:#2e3436; opacity:1; padding: 7px 19px; } 
 <div class="upbtn"><a href="#top"><b>▲ ВВЕРХ</b></a> </div>

  • A rather vague description of the problem, please give code examples or links to similar questions that have sample code. Unfortunately, jumping elements in animation is a frequent occurrence and specifically your example doesn’t cover anything - alexoander
  • @alexoander thanks, at least someone said. ps probably to see the effect you need to run the code locally on your computer AND RELOAD THE PAGE - qwertet

2 answers 2

Yes, Firefox does not animate the starting values. And in the opposite direction, the animation works when the transition is set on the element. So that when loading nothing animated, you can use keyframes or do something like:

 .load * { -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; }

and

 $(window).load(function() { $("body").removeClass("load"); });
  • Sorry for the answer while I can not vote (new to the site) the answer helped, thanks and what was the joke? really can't fix it in chrome, and I read somewhere that it’s running from version 24 .. maybe it's not a bug but a feature?) - qwertet
  • in my opinion, it’s rather a feature, and in ff, the behavior is wrong, but there can be another opinion, which is probably why it is still so. - 11111000000
  • still a bug after all. - qwertet

Finally!!!!!! this happened!!!!!!!!!!!!!!!!!! I found a simple answer! No js! this link helped

In general, the trick is to make the necessary properties because of which everything dances from the connected styles with the style tag

For example, in my example, the button caption is a link and when the page is loaded the link ON THE CHROME gradually changes from standard blue / purple to the gray color specified in external styles. You just have to get out of the external styles in my example.

a { color:#ccc; text-decoration:none; }

in the style tag and after that these properties will not bother!