10

I've noticed that when animating CSS3 scale() it seems to pixelate every element it's used on.

Example: http://jsfiddle.net/PD7Vh/2/

In the above example, scale() pixelates the center div when you hover over it.

Are my css settings wrong, or is this what scale() naturally does?

Here's a screenshot from Chrome on Windows 7:

thirtydot
  • 224,678
  • 48
  • 389
  • 349
zero
  • 2,999
  • 9
  • 42
  • 67

1 Answers1

12

The solution is to start your center circle as big as it needs to be, then scale it down as the reference starting point.

Then, on the hover event you scale up to 1, which will preserve the unpixelated center circle.

Reference: jsFiddle

Note other settings such as positioning are done due to compensate for these changes.

Status Update:
Consider instead of using border-radius to make circle, use ASCII Character of circle or outline circle:

• ○ ☺ ☻ ☼

Reference: jsFiddle (Note positions are not calibrated.)

The above characters are essentially TEXT, hence use ANY CSS2 or CCS3 text or font property!

As certain characters become really big they do pixelate so use "reverse scale" method for these characters as previously answered but note, at least in Firefox, the transitions become expensive when super large fonts are used. Works best with medium to large fonts.

Tip: This ASCII based method may need the width and height properties for positioning to be realized correctly, so use that if positioning seems broken.

Community
  • 1
  • 1
arttronics
  • 9,957
  • 2
  • 26
  • 62
  • To clarify further, since your objective was to originally scale the circle dimension 4 times larger, the starting dimension for the circle size must then be 4 times smaller or 1/4 of the size. That being said, the starting `scale of 0.25` is then realized since it's the decimal equivalent of 1/4. – arttronics Jul 03 '12 at 23:35
  • Check out the new Status Update in my answer for alternate circle method. – arttronics Jul 05 '12 at 23:06