Transition and Animation issues

[DesmondW]

I’m working on a codepen at http://codepen.io/DesmondW/pen/oqbAd and I’ve run into two problems that really stump me:

1. CSS animations don’t seem to take place while I’m in another browser tab although JS does, so when I go back to the tab the transition: all ease 1s; takes place very fast over the course of a second.

2. Most CSS animations within the .ray class only affect the last element with that class. You can see that in this case transform: scaleY(1.2); is only affecting one of the sun rays.

I tried googling both the issues but couldn’t dig anything up. Any ideas?

[DesmondW]

bump

[DesmondW]

I’ve resolved the second issue but I’m still struggling with the CSS not functioning while the browser tab is inactive.

Is there a way to enable CSS while the tab is inactive or should I hack around it?

[Alen]

Is there a way to enable CSS while the tab is inactive or should I hack around it?

Could this be a CodePen issue? Have you tried local example?

[DesmondW]

I don’t think so – if you view the debug mode it’s just the code that’s in the demo and it has the same issue.

[Author]

Posts