CSS3 Transition in Chrome and IE

The last image is rotated -15 degrees

The last image is rotated -15 degrees


I am using CSS3 transitions to do rotations. My observations:

  1. PNG and SVG images look sharp in Chrome. However, when they move, they go jagged. To fix this tendency in Chrome, you need to make a SVG file which is exactly the size you will display it on the page. Then in the CSS, you declare the size as well (I used just the width property). This exact size specification will make the SVG appear smoothly in IE 9.
  2. Any version of IE before 9 will either a) not display your SVG at all or b) show a red x box.
  3. The unpleasing way of doing things is to then make a JPG image which you can have animated in compatible browsers but will not move in non-modern browsers.

Resources