Tuesday, April 1st, 2008

Fun with SVG and CSS Animations

Category: CSS, Examples, SVG

<p>

Torrey Rice took Safari 3.1 and the new CSS Animations feature, and mashed it up with SVG to create a fisheye demo.

All the functionality through CSS:

  1. .dock img {
  2.    width:50px;
  3.    padding:10px;
  4.    float:left;
  5.    position:relative;
  6.    display:block;
  7.    -webkit-transition:width 0.5s ease-out, top 0.2s ease-out;
  8. }
  9.  
  10. .dock img:hover {
  11.    width:100px;
  12. }
  13.  
  14. .dock img:active {
  15.    top:-40px;
  16. }
  17.  
  18. .dock img:hover + img {
  19.    width:70px;
  20. }

Jeff Schiller then asked to see the example using the standard SMIL, which has been turned on (all beit a subset) on WebKit nightly to pass Acid3.

Related Content:

Posted by Dion Almaer at 7:45 am
3 Comments

-----
-2.7777777777778E+16 rating from 36 votes

3 Comments »

Comments feed TrackBack URI

I am having troubles pulling up the demo page on Leopard with Safari 3.1. Soon as the page begins to load my browser crashes and I am forced to relaunch it.

So much for a Safari 3.1 only demo working on its intended target ;)

Comment by pplante — April 1, 2008

working fine on my leopard

Comment by zero0x — April 1, 2008

A fisheye svg demo; how original.

Comment by deadcabbit — April 2, 2008

Leave a comment

You must be logged in to post a comment.