Monday, December 29th, 2008
tyPhoGraphic: Declarative CSS Transformations
Category: CSS
The demo above is tyPhoGraphic a declarative CSS transformation library.
If you check out a demo with a browser that supports the CSS declarations, you can see that the work is done via:
-
-
<div effect="zoomin" duration="1700">2009</div>
-
<div effect="zoomout" duration="1600" start="-200">2009</div>
-
<div effect="wobble" duration="1000">2009!</div>
-
<div effect="shake" duration="1200">2009!</div>
-
-
<div effect="shake" duration="1000" start="200">Happy </div>
-
<div effect="waggle" duration="1200">New</div>
-
<div effect="waggle" duration="1200">Year!</div>
-
-
<div effect="zoomout" duration="800" start="500">Party </div>
-
<div effect="zoomout" duration="400">like </div>
-
<div effect="zoomin" duration="400" start="-100">it's </div>
-
<div effect="zoomin" duration="800">1999</div>
-
Andy Edmonds, creator of the library, told us:
I’ve been having fun with CSS Transforms (supported by both Webkit/Safari/iPhone and Firefox) as well as the Webkit/iPhone only transform animations. The resulting framerates on the iPhone are hard to achieve any other way. I’ve even built an iPhone app called iBlipper with this tech.
This is not a major hack, but scratches an itch I’ve had for years to be able to code typographical animation with HTML and an augmented set of attributes — in this case: effect, duration, and start.
Related Content:
Its a shame the world forgot about Microsoft’s HTML+Time back in the day
Hrm…
I viewed the demo page in Chrome 1.0.154.42, Firefox 3.5.5, Safari 525.27.1, and even Opera 9.60 and got no animation in any of the browsers. What’s the point of working on something that none of the existing browsers can see? How are you testing this if none of the existing browsers can display it?
<BLINK>sighs</BLINK>