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:

  1. <div effect="zoomin" duration="1700" >2009</div>
  2. <div effect="zoomout" duration="1600"  start="-200">2009</div>
  3. <div effect="wobble" duration="1000" >2009!</div>
  4. <div effect="shake" duration="1200" >2009!</div>
  5.  
  6. <div effect="shake" duration="1000" start="200" >Happy </div>
  7. <div effect="waggle" duration="1200" >New</div>
  8. <div effect="waggle" duration="1200" >Year!</div>
  9.  
  10. <div effect="zoomout" duration="800" start="500" >Party </div>
  11. <div effect="zoomout" duration="400" >like </div>
  12. <div effect="zoomin" duration="400" start="-100" >it's </div>
  13. <div effect="zoomin" duration="800" >1999</div>
  14. <div effect="shake" duration="50000" ><a href="demo.html">Restart<br />the<br />animation</a> </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:

Posted by Dion Almaer at 7:54 am
3 Comments

++---
2.6 rating from 22 votes

3 Comments »

Comments feed TrackBack URI

Its a shame the world forgot about Microsoft’s HTML+Time back in the day

Comment by TNO — December 29, 2008

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?

Comment by commadelimited — December 30, 2008

<BLINK>sighs</BLINK>

Comment by jamiethompson — December 31, 2008

Leave a comment

You must be logged in to post a comment.