In my application I have different CSS3 animation effects. All located on a blurred image. I realised the when the animation if running the blurriness changes.
Have a look at the demo:
background: url(/black_2_audio_simple_repeat_2-48.png) no-repeat center;
transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
Great question, and a pretty nasty thing to figure out :)
I've looked at your fiddle and found out that this effect seems to be connected with the elements positioning - as they are both relative, the entire container gets redrawn and the blur flickers, when both children get redrawn by the browser.
If you give the .repeat and .blur
your problems will be solved :)
Also - I noticed that the border-radius gets lost, when the rotate transition takes place. This is solved by adding a non-zero perspective to the parent element .player
Take a look at the updated jsfiddle and let me know what you think.