DannyBoy DannyBoy - 9 days ago 7
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;
float:left;
}

.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?

Answer

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

position:absolute;

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.

Comments