Tuesday, April 1st, 2008
Fun with SVG and CSS Animations
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:
CSS:
-
-
.dock img {
-
width:50px;
-
padding:10px;
-
float:left;
-
position:relative;
-
display:block;
-
-webkit-transition:width 0.5s ease-out, top 0.2s ease-out;
-
}
-
-
.dock img:hover {
-
width:100px;
-
}
-
-
.dock img:active {
-
top:-40px;
-
}
-
-
.dock img:hover + img {
-
width:70px;
-
}
-
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.
-35714285714286000 rating from 28 votes
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 ;)
working fine on my leopard
A fisheye svg demo; how original.