I spoke at Refresh Austin in April 2010 on the subject of Webkit Transitions. It was most excellent. Demos are available at: http://daverupert.com/demos/
2. Table of Contents
• Self-introduction: I’m Dave Rupert.
• What’s -Webkit-Whatsitsface?
• Can I just see a demo?
• How do I use it awesomely?
• Questions/Comments/Concerns/Beer?
3. I work at Paravel.
...And yes, this is on our actual website.
4. I host a podcast.
The ATX Web Show
is all about Austinites doing
innovative stu on the web.
If you would like to be on the
show...
Call 409-BEEF-CAR Today!
...And yes, this is my actual Google Voice number.
6. NO. THIS WILL
NOT WORK IN IE6.
We can ght about Browsers, Capabilities &
Graceful Degradation some other day.
Preferably, NOT on the mailing list :)
7. But it will work on...
~90 Million Mobile Devices + ~10% of all browsers.
8. -webkit-transition
a{
color: blue;
-webkit-transition: color 2s linear;
}
CSS Property Easing
a:hover {
Time
color: red;
}
9. The Long Way
a{ CSS Property
color:blue;
-webkit-transition-property: color;
-webkit-transition-duration: 2s; Time
-webkit-transition-timing-function: linear;
}
Easing
a:hover {
color: red;
}
15. This has all been done before
• Java Applets
• Flash
• Javascript
• Microsoft DirectX Filters
• and now the Browser via CSS
16. Best Practices?
• Adding Animations & Transitions
DOES NOT replace good UX.
• In fact, in most cases, Animations &
Transitions are in opposition to Usability.
• Consider me waiving in a large room...
17. Don’t Waste Precious Time
• Make it Snappy.
Don’t Waste Users’ Time.
• In our non-o cial testing we found
0.2s~0.3s to be a pretty good feel.
• Make it faster for repetitive tasks.
• Consider waiving in a large room...
(again)
18.
19. Questions?
Follow Me @davatron5000
Chunk5 and Goudy Bookletter 1911 from The League of Movable Type