Ask HN: Javascript Animated Icons Becoming Mainstream?

2 pointsby shadowpwner16 ปีที่แล้ว1 comments

I've noticed more and more the use of animation of CSS, instead of gif icons. For example, on Google's Chrome OS page (http://www.google.com/chromeos/features.html), mousing over brings pretty animations done (almost) purely by rotating or swapping images.

Is it feasible to do this to your own website? Has anyone done it?

1 comments

infinity16 ปีที่แล้ว

I like the example from the Chrome OS page, it looks really cute. Unfortunately, if JavaScript is deactivated no icons are visible. Some kind of fallback would have been nice.

I have sometimes experimented with JavaScript based animations in the past. But most of the time I decided against putting the animations on web pages, if the page is not about the JavaScript animation itself. Sometimes less really is much better and less distracting. So I think that animations like in the example from the Chrome OS page will not become mainstream.

You could also use SVG embedded in XHTML for animations. Fade-in effects and movements of objects and much more are possible. Unfortunately Inline-SVG does not work in Internet Explorer: the pages will have to be delivered with an application/xhtml+xml MIME type to browsers that can understand it (Opera, Firefox, Chrome, Safari). Internet Explorer will just show a download prompt for such a page. And the XHTML pages must be valid, otherwise the compliant browsers display an error page instead of the (buggy) web page. This is a huge difference to normal HTML pages.

With SVG it is possible to construct vector graphic animations without JavaScript for browsers that support SVG animations. Additionally, you can use JavaScript for more complex effects. This is an alternative to animations with image files and JavaScript. It is also possible to use images in SVG.