SVG + CSS Animations = Fisheye Fun March 28th, 2008 at 12:32 am by Torrey Rice

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.

8 Responses to “SVG + CSS Animations = Fisheye Fun”

  1. Jeff Schiller says:

    Nice demo. Apple just turned on SMIL animation on the trunk (nightly builds). Care to rewrite your demo using SMIL so that it could work in both Opera and WebKit nightly?

  2. mwilcox says:

    Thats very cool. The animation is incredibly smooth.

  3. Peter Ellis says:

    Nice but shame it isn’t cross browser! Great work though!

  4. George says:

    Hummm….

    Command: Safari
    Path: /Applications/Safari.app/Contents/MacOS/Safari
    Parent: WindowServer [77]

    Version: 3.1 (4525.13)
    Build Version: 1
    Project Name: WebBrowser
    Source Version: 45251300

    PID: 1599
    Thread: 0

    Exception: EXC_BAD_ACCESS (0×0001)
    Codes: KERN_PROTECTION_FAILURE (0×0002) at 0×00000008

  5. Paolo says:

    the effect demo is very beautiful.

  6. RichSad says:

    I just tried this demo under Safari 3.1.1 on a G4 Mac mini 1.25GHz 1GB RAM. I too got a fault:
    Date/Time: 2008-04-19 22:02:40.721 -0400
    OS Version: 10.4.11 (Build 8S165)
    Report Version: 4

    Command: Safari
    Path: /Applications/Safari.app/Contents/MacOS/Safari
    Parent: WindowServer [1556]

    Version: 3.1.1 (4525.18)
    Build Version: 1
    Project Name: WebBrowser
    Source Version: 45251800

    PID: 1594
    Thread: 0

    Exception: EXC_BAD_ACCESS (0×0001)
    Codes: KERN_PROTECTION_FAILURE (0×0002) at 0×00000008

  7. DojoCampus » Blog Archive » What is a _Widget says:

    […] Rice recently explored Safari 3.1’s new CSS Animation support on the SitePen blog. While this kind of upcoming technology is wonderful, it doesn’t help to make […]

  8. SitePen Blog » Taking a Look at CSS3 says:

    […] Torrey Rice, has touched upon unofficial CSS advancements in Safari 3.1 in his discussion about CSS animations, so I’ll focus on advancements that are part of ongoing CSS3 drafts. While CSS 3 as a whole […]

Leave a Reply