CODEWITHSUNDEEP
cssanimationcss-animations
DannyBoy
DannyBoy

Reputation: 17

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?

Upvotes: 0

Views: 845

Answers (2)

Per
Per

Reputation: 381

Maybe not applicable to this specific case but the heading matches.

This effect (rotate makes other elements blurry) also appears when one of the parent elements are using transform: translate(50%, 50%).

For example if you are using translate to vertically center a modal window you cant have a rotate effect (lika a spinning cog) since the combination of the two effects makes everything in the modal blurry.

Upvotes: 2

wick3d
wick3d

Reputation: 672

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.

Upvotes: 1

Related Questions