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:
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.
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.
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.
Follow Us
Subscribe
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?
Thats very cool. The animation is incredibly smooth.
Nice but shame it isn’t cross browser! Great work though!
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
the effect demo is very beautiful.
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
[...] 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 [...]
[...] 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 [...]
i have made a modified version of marc grabanski’s fisheye menu… you may want to check it out…
http://bostsip.blogspot.com/2009/10/mac-like-menu.html