DannyBoy DannyBoy - 1 year ago 102
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?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download