Do more on the web, with a fast and secure browser!

Download Opera browser with:

  • built-in ad blocker
  • battery saver
  • free VPN
Download Opera

Buggy performance of transition animations

  • OK, so I am testing out some new features of CSS3 like transition, transform, rotating images with perspective and so on ... but I notice that Opera is not performing well.


    • Transition produces blurry images during animations, clearing them at the last frame

    Well, I can't really say this is the only bug, because the behavior is sporadic ... some animations don't blur, some always blur the image, although the images are scaled down and they have enough resolution.

    I experimented with making a CSS replacement for Lightbox plugins. It's really an experimental idea I explored where the images are scaled down and when :hover triggers, they scale 2.5 times with a large outline of 2000px which uses rgba color transparency. I use this huge outline as a method of covering the rest of the site, making it work as a lightweight, hover-only Lightbox. While the idea works overall, the images blur during the animation, making it look bad. 100px outline does not produce this blur but at around 200px outline it blurs. Replacing outline with box-shadow produces different look but it behaves more or less the same. Perspective always produces blurry animation. Adding some rotation also produces blurry animation. I can't really understand what is going on.

    Here is a screencapture of the bug: