when scaling an element with css3 scale, it becomes pixelated until just after the animation is complete. I’m animating an element with a border

by

Okay so i think i’ve come up with a work around;

essentially; don’t use “scale”. use “scale3d” and have it setup so that the largest you want the image is scale3d(1,1,1).

Here is an example with the circle thing you had in there. I changed the scale to 5, because i didn’t want to put 0.222222222222222222222222222222222 into the scale3d func…

[edit] So i tried the jsfiddle demo again, on a computer with no hardware acceleration, and the pixelation effect was gone. So it seems that it’s the same problem as with scale3d where it converts it into a texture and then scales it. you can do as in the circ3 div here.

More Related Contents:

  1. How to force re-render after a WebKit 3D transform in Safari
  2. How can I transition height: 0; to height: auto; using CSS?
  3. Transitions on the CSS display property
  4. Using CSS for a fade-in effect on page load
  5. CSS3 background image transition
  6. z-index is canceled by setting transform(rotate)
  7. CSS 3 slide-in from left transition
  8. CSS Animation and Display None
  9. CSS transition shorthand with multiple properties?
  10. WebKit: Blurry text with css scale + translate3d
  11. How to prevent Webkit text rendering change during CSS transition
  12. Spin or rotate an image on hover
  13. CSS3 transition on click using pure CSS
  14. Two-tone background split by diagonal line using css
  15. Expand div from the middle instead of just top and left using CSS
  16. CSS3 Fade Effect
  17. Why can’t I animate custom properties (aka CSS variables)?
  18. CSS: Animation vs. Transition
  19. CSS3 transform order matters: rightmost operation first
  20. Animating max-height with CSS transitions
  21. Why is text getting blurry and wobbles during 2d scale transform
  22. Bug in CSS3 rotateY transition on Safari?
  23. How can I transition height: 0; to height: auto; using CSS?
  24. How to transition CSS display + opacity properties
  25. Can I apply a CSS transition to the overflow property?
  26. CSS3 Transform affecting other elements with chrome/safari
  27. Does Internet Explorer support CSS transitions?
  28. CSS transition between left -> right and top -> bottom positions
  29. CSS transition fade in
  30. Turning off Twitter Bootstrap Navbar Transition animation

Leave a Comment