SVG + CSS Animations = Fisheye Fun

Recently Apple delivered Safari 3.1 with some very exciting features. While we still can’t use things like multiple background images and drop shadows across all browsers, we are getting to play with the future and I, for one, am loving it. One of the most interesting things in Safari 3.1 is the (hopefully soon to be proposed and standardized as part of the CSS3 spec) CSS Animations. CSS animations allow you to animate just about any property on an element as well as do fun things like rotate and skew. As a demo of this I created a quick and dirty CSS3 fisheye/dock demo. As an added bonus, the demo uses SVG in the img tag.

So how does this work? Well here’s the CSS.

For each dock image:

.dock img {
   width:50px;
   padding:10px;
   float:left;
   position:relative;
   display:block;
   -webkit-transition:width 0.5s ease-out, top 0.2s ease-out;
}

With the last line of CSS we set width and top to be transition properties. Next we set the image to grow in width on hover and to bounce upwards when clicked.

.dock img:hover {
   width:100px;
}
		
.dock img:active {
   top:-40px;
}

With the transition set, Safari handles the rest. Now as a little added fun we set the image following the hovered over image to grow a little as well.

.dock img:hover + img {
   width:70px;
}

While this effect isn’t perfect and has little practical use, there is a lot of potential in Safari and CSS3 in general and I look forward to seeing what we as a community come up with.