CSS3 animations with transform causes blurred elements on Webkit

animation css webkit css-animations
Trolleymusic picture Trolleymusic · May 2, 2012 · Viewed 22k times · Source

So I've got some native elements (divs) with various effects applied to them (border-radius, box-shadow and transform: scale()). When I animate them, two weird things happen:

  1. Even though I'm not trying to animate the scale, if I don't put the scale in the animation, it is ignored.
  2. When I put the scale in the animation, Webkit blurs the elements

See the example here: http://jsfiddle.net/trolleymusic/RHeCL/ - the buttons at the bottom will trigger the issues.

The first issue happens in Firefox too, so I'm guessing that it's because that's how the animation spec is supposed to work. Not what I wanted, but ok, I'll live with it.

The second issue is just weird. I know it's to do with 3d transform because if I (just for testing purposes) declare -webkit-perspective or -webkit-transform-style: preserve-3d; on the circle elements, it causes the blur issue as well. My confusion is that I'm not trying to transform the z index as all, and I have also tried the animations using purely translateY instead of translate.

It happens in Chrome (18), Chrome Canary (20) and Safari (5.1.2 & 5.1.4).

So, am I right in what I think is happening? And how can I avoid the blurriness?

Worst-case scenario: I can just use different sizes for the elements instead of scaling them, that's not really a problem - but I thought this would be a more elegant solution and now this issue has cropped up.

Answer

Josh Allen picture Josh Allen · May 2, 2012

Refer to this answer as to why it's blurring the element: https://stackoverflow.com/a/4847445/814647

Summary of the above: WebKit is taking the original size/CSS before animating, and treating it as an image, THEN scales it up, producing the blurriness.

Solution: Make initial size the largest scale you're going to, and start it initially with a lower scale (so in your case you'd want to up the size by 5, and set the initial scale to 0.2)

UPDATE

The reason it ignores the current scale from what I understand is because you're not specifically setting JUST the translate (I'm looking up the CSS for it now). When you run -webkit-animation, it's resetting all your current transforms (scale), so you need to make sure that you have your scales in there. I'm looking up the css to change so it only changes just the position:

Related questions

Safari changing font weights when unrelated animations are running

I'm using css animations on my page and Safari seems to change unrelated font weights elsewhere on the page when animations are running. Any idea why this happens? All other browsers work fine, include webkit ones like Chrome. I've detailed …

Read More
CSS endless rotation animation

I want to make a rotation of my loading icon by CSS. I have an icon and the following code: <style> #test { width: 32px; height: 32px; background: url('refresh.png'); } .rotating { -webkit-transform: rotate(360deg); -webkit-transition-duration: 1s; -webkit-transition-delay: now; …

Read More
CSS3 Continuous Rotate Animation (Just like a loading sundial)

I am trying to replicate an Apple style activity indicator (sundial loading icon) by using a PNG and CSS3 animation. I have the image rotating and doing it continuously, but there seems to be a delay after the animation has …

Read More