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

-Webkit-
Transition
The 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 do I use it awesomely?

• Questions/Comments/Concerns/Beer?

I work at Paravel.

...And yes, this is on our actual website.

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.

Let’s Get Started
But rst...

NO. THIS WILL
NOT WORK IN IE6.
We can ght about Browsers, Capabilities &
Graceful Degradation some other day.
Preferably, NOT on the mailing list :)

But it will work on...

~90 Million Mobile Devices + ~10% of all browsers.

-webkit-transition
a{
color: blue;
-webkit-transition: color 2s linear;
}
CSS Property Easing
a:hover {
Time
color: red;
}

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;
}

Multiple Properties
a{
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;
}

All Together Now!
a{
color: blue;
-webkit-transition: all 2s linear;
}
All Properties Easing
a:hover {
Time
color: red;
}

DEMO
-TIME-
http://daverupert.com/demos

This has all been done before
• Java Applets

• Flash

• Javascript

• Microsoft DirectX Filters

• and now the Browser via CSS

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...

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)

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

Questions?

Follow Me @davatron5000
Chunk5 and Goudy Bookletter 1911 from The League of Movable Type

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

More Related Content

What's hot (20)

Similar to Webkit Transitions. The Good, The Bad, & The Awesome (20)

Recently uploaded (20)

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