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.
Posted March 28th, 2008 at 7:17 am
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?
Posted March 31st, 2008 at 9:24 am
Thats very cool. The animation is incredibly smooth.
Posted April 1st, 2008 at 7:13 am
Nice but shame it isn’t cross browser! Great work though!
Posted April 1st, 2008 at 7:46 am
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
Posted April 2nd, 2008 at 8:09 am
the effect demo is very beautiful.
Posted April 19th, 2008 at 7:07 pm
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
Posted April 20th, 2008 at 5:27 am
[…] 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 […]
Posted December 8th, 2008 at 11:25 pm
[…] 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 […]