Opera: issues with CSS3 keyframe animation?

Question

Opera

Decided to implement almost all animations with CSS3 rather than jQuery.

Chrome, FF, IE10 pleased with stable work (especially IE10 - I was very pleasantly surprised). The opera once again disappointed with its inexplicable leaps.

Here is a small example jsfiddle.net/3nnRg/1/

All of the above browsers display smoothly diverging concentric circles. Opera at a certain moment decides that there are enough circles and it is not necessary to animate them all, so it simply stops the animation at 100% and does not return to the initial frame of the animation, despite the animation-duration infinite. Moreover, it can not animate all attributes: most often the circle freezes with a maximum size and opacity = 1.0, although the transparency should decrease to 0.0. If the animation contains not two frames (0% and 100%), but more (for example, 0% 80% 100%), then it may get stuck on some of the intermediate ones.

Worse, I use animation not just as a decorative element, but the functionality of the site is based on it. For example, hiding/appearing of sections of the site is also implemented through animations, and if Opera decides not to continue the animation, then the animationend event is also not generated and the site simply ceases to function.

I was sure that since animation in Opera was implemented more than a year ago, and even now it is supported without vendor prefixes, then everything will work correctly. An-no. Now it's just not clear what to do. I really didn’t want to do fallback on jQuery, since the whole essence of the idea is lost.

Has anyone ever encountered this, and if so, how did you solve it and did you solve it?

Answer 1

To be fair, Opera had problems with updating the screen image many years ago, for example, in menus animated by Javascript. Apparently their engine is better sharpened for static pages.
But it's kind of weird of you to rely solely on new, raw technology without using fallbacks for older browsers. The solution is to add support for classic javascript animations.
> I really didn’t want to do fallback on jQuery, because the whole essence of the idea is lost.
Is it difficult?
Also, I note that CSS animations tend to load the processor, turn on the fans and drain the battery. Although the same flash can do the same and even more without such a load. You run the risk of making the site slow and twitchy. The network is full of animations, which, not only 60, 30 fps, do not squeeze out.