CSS endless animation after hidden don't reset (Chrome)

Question

Here I have an example of CSS keyframe animation (you can see all of this on this demo )

The code will scale img every 1.4 seconds to 0.75 and return to the original scale (1). It works great.

Then I add simple jQuery code to simulate an error:

setTimeout(function () { $("img").css('visibility', 'hidden'); activate(); }, 3000); function activate() { setTimeout(function () { $("img").css('visibility', 'visible'); }, 3000); } 

 @-webkit-keyframes imagebulger { to { -webkit-transform: scale(.75); transform: scale(.75); } } @keyframes imagebulger { to { -webkit-transform: scale(.75); transform: scale(.75); } } img { -webkit-animation: imagebulger 1.4s infinite alternate; -moz-animation: imagebulger 1.4s infinite alternate; -o-animation: imagebulger 1.4s infinite alternate; animation: imagebulger 1.4s infinite alternate; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="http://placehold.it/200x200" /> 

This will hide the img element after 3 seconds and for 3 seconds. When the img element returns to visible, the effect of resizing will no longer work.

This happens to me in Chrome 41.0.2272 (Ubuntu). In Firefox, it works as expected.

---

EDIT

It seems the error is related to Chrome. I opened the question. As a workaround, as suggested, use display:none instead of vissibility:hidden or add a class after setting vissibility:visible

EDIT 2 There is a problem here: https://code.google.com/p/chromium/issues/detail?id=444852

Answer 1

This seems to be a mistake. The W3 documentation suggests that hidden visibility has the following effect:

The created box is invisible (completely transparent, nothing is drawn), but it still affects the layout. In addition, the descendants of the element will be visible if they have: visible.

Therefore, it should still be calculated, just not drawn. Obviously, the browser will probably want to make savings and not calculate it where possible, which seems to happen where an error occurs, when this calculation does not resume when necessary. You can get around this by switching the display and wrapping your animated element in a div of the same size as the element to prevent the layout from merging. Otherwise, you can simply reapply the animated CSS by switching the class as specified in Jeff.

See the JS script showing the hidden element, still clearly animated: JSFiddle . It makes me think this is a mistake. Otherwise, the following is an example of its operation with display switching.

 setTimeout(function () { $("img").hide(); activate(); }, 3000); function activate() { setTimeout(function () { $("img").show(); }, 3000); } 

 .image-wrap { height: 200px; width: 200px; } @-webkit-keyframes imagebulger { to { -webkit-transform: scale(.75); transform: scale(.75); } } @keyframes imagebulger { to { -webkit-transform: scale(.75); transform: scale(.75); } } img { -webkit-animation: imagebulger 1.4s infinite alternate; -moz-animation: imagebulger 1.4s infinite alternate; -o-animation: imagebulger 1.4s infinite alternate; animation: imagebulger 1.4s infinite alternate; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="image-wrap"> <img src="http://placehold.it/200x200" /> </div> 

Answer 2

I'm having problems with animations stopping them from running before. The solution for me has always been to reuse the animation as a class whenever I want it to restart. I changed your fiddle with this solution:

http://jsfiddle.net/q234Lsx8/5/

I applied the CSS rule to img.bulge and then the jQuery code removes and adds the bulge class to hide and show.