Fun with SVG and CSS Animations
Date : 2008 04 01 Category : Tech & Development
Ajaxian
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:
PLAIN TEXT 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.