DannyBoy DannyBoy - 4 months ago 33
CSS Question

Why does rotate animation in CSS3 affect other elements blurriness

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:

div.player {
width: 400px;
height: 400px;
border-radius: 10px;
overflow: hidden;
position: relative;

.blur {
background-image: url(/399d59087d2a855.jpg);
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
filter: blur(7px);
-webkit-filter: blur(7px);
-moz-filter: blur(7px);
-ms-filter: blur(7px);
-o-filter: blur(7px);
.repeat {
background: url(/black_2_audio_simple_repeat_2-48.png) no-repeat center;
width: 48px;
height: 48px;
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;

.repeat:hover {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
-moz-transform: rotate(180deg);

Any idea how to keep the blurred image unchanged when the animations r running?


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.