Your SlideShare is downloading. ×
0
-Webkit-TransitionThe Good, The Bad & The Awesome
Table of Contents•   Self-introduction: I’m Dave Rupert.•   What’s -Webkit-Whatsitsface?•   Can I just see a demo?•   How ...
I work at Paravel....And yes, this is on our actual website.
I host a podcast.The ATX Web Showis all about Austinites doinginnovative stu on the web.If you would like to be on theshow...
Let’s Get Started      But rst...
NO. THIS WILLNOT WORK IN IE6. We can ght about Browsers, Capabilities &   Graceful Degradation some other day.   Preferabl...
But it will work on...~90 Million Mobile Devices + ~10% of all browsers.
-webkit-transitiona{     color: blue;     -webkit-transition: color 2s linear;}                CSS Property           Easi...
The Long Waya{                                   CSS Property  color:blue;  -webkit-transition-property: color;  -webkit-t...
Multiple Propertiesa{  color:blue;                            CSS Properties  background-color:white;  -webkit-transition-...
All Together Now!a{     color: blue;     -webkit-transition: all 2s linear;}           All Properties          Easinga:hov...
DEMO -TIME-http://daverupert.com/demos
...aaandwe’re back.
So, What’sThe Big Deal?
This has all been done before •   Java Applets •   Flash •   Javascript •   Microsoft DirectX Filters •   and now the Brow...
Best Practices?•   Adding Animations & Transitions    DOES NOT replace good UX.•   In fact, in most cases, Animations &   ...
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 ...
Questions?      Follow Me @davatron5000Chunk5 and Goudy Bookletter 1911 from The League of Movable Type
Webkit Transitions. The Good, The Bad, & The Awesome
Upcoming SlideShare
Loading in...5
×

Webkit Transitions. The Good, The Bad, & The Awesome

6,646

Published on

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/

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,646
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
18
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Webkit Transitions. The Good, The Bad, & The Awesome"

  1. 1. -Webkit-TransitionThe Good, The Bad & The Awesome
  2. 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. 3. I work at Paravel....And yes, this is on our actual website.
  4. 4. I host a podcast.The ATX Web Showis all about Austinites doinginnovative stu on the web.If you would like to be on theshow...Call 409-BEEF-CAR Today!...And yes, this is my actual Google Voice number.
  5. 5. Let’s Get Started But rst...
  6. 6. NO. THIS WILLNOT WORK IN IE6. We can ght about Browsers, Capabilities & Graceful Degradation some other day. Preferably, NOT on the mailing list :)
  7. 7. But it will work on...~90 Million Mobile Devices + ~10% of all browsers.
  8. 8. -webkit-transitiona{ color: blue; -webkit-transition: color 2s linear;} CSS Property Easinga:hover { Time color: red;}
  9. 9. The Long Waya{ CSS Property color:blue; -webkit-transition-property: color; -webkit-transition-duration: 2s; Time -webkit-transition-timing-function: linear;} Easinga:hover { color: red;}
  10. 10. Multiple Propertiesa{ color:blue; CSS Properties background-color:white; -webkit-transition-property: color, background; -webkit-transition-duration: 2s, 5s; Times -webkit-transition-timing-function: linear;}a:hover { Easing color: red; background-color:pink;}
  11. 11. All Together Now!a{ color: blue; -webkit-transition: all 2s linear;} All Properties Easinga:hover { Time color: red;}
  12. 12. DEMO -TIME-http://daverupert.com/demos
  13. 13. ...aaandwe’re back.
  14. 14. So, What’sThe Big Deal?
  15. 15. This has all been done before • Java Applets • Flash • Javascript • Microsoft DirectX Filters • and now the Browser via CSS
  16. 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. 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. 18. Questions? Follow Me @davatron5000Chunk5 and Goudy Bookletter 1911 from The League of Movable Type
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×