notes from Andy Clarke’s talk “Smoke Gets In Your Eyes” at AEA2011SF

By greg On December 13, 2011 · Leave a Comment

notes from Andy Clarke’s talk “Smoke Gets In Your Eyes” at AEA2011SF:

check out luke wroblewski’s notes on the same talk:

http://www.lukew.com/ff/entry.asp?1471

madmanimation
(how it was made, in css3)

what do you think of when you hear web animation? you probably think of flash.

css3 animations are a new and emerging technology, more support everyday:

https://developer.mozilla.org/en-US/demos/tag/tech:css3/

css3 transitions:

.lamp {
transition-property : opacity; /* BACKGROUNDS, BORDERS, COLOURS, DIMENSIONS, FONTS, OPACITY, POSITION, TRANSFORMS */
transition-duration: .1s;
/* transition-delay: .1s; */
transition-timing-function: linear;
}

/* shorthand */
.lamp { transition : opacity .25s .1s linear; }

/* vendor prefixes */
.lamp {
-webkit-transition : opacity .25s .1s linear;
-moz-transition : opacity .25s .1s linear;
-o-transition : opacity .25s .1s linear;
transition : opacity .25s .1s linear;
}

animation keyframes

@keyframes lamp {
from { opacity : 0; }
to { opacity : 1; }
}

@keyframes lamp {
0% { opacity : 0; }
25% { opacity : .5; }
70% { opacity : .24; }
100% { opacity : 1; }

animation delay, duration, iterations

.lamp {
animation-delay : 1500ms;
animation-duration : 6s;
animation-iteration-count: 1;
animation-timing-function : linear;
animation-direction : normal;
}

/*shorthand */
.lamp { animation : 6s 1500ms 1 linear normal; }

/* you need vendor prefixes for moz and webkit */
.lamp {
-webkit-animation : 6s 1500ms;
-moz-animation : 6s 1500ms;
animation : 6s 1500ms;
}

animate translate

#shadow {
top : 540px;
left : 435px;
animation-name :
shadow; animation-duration 1s;
}
@keyframes shadow {
0% { transform : translate(0,0); }
65% { transform : translate(0,-135px); }
75% { transform : translate(0,-135px); }
100% { transform : translate(0,-130px); }
}

some other animation selectors:
transform : translate,
animate translate,
transform: rotate(-20deg)
transform : origin
animate rotate

“The Madmaninmation demo of animatable is a great example. When you check the source code it falls back to a list with the script of the animation. This allows everybody to know what is going on and helps your product to be understood by search engines.”
– Chris Heilmann

<ol id="animation">
<li id="scene-01"> <p>Don Draper pauses in the doorway of his Manhattan
office. Everything except fan blades are still.
Don’s desk is littered with bottles.</p> </li>
<li id="scene-02"> <p>Don walks slowly into the room, his shoes reflected in
the highly polished floor.</p> </li>
...
</ol>

cool little “squeeze” animation:

.logo:hover {
animation-name : logo;
animation-duration : 1s;
animation-iteration-count : infinite;
}
@keyframes logo {
0% { transform : scaleX(1); }
50% { transform : scaleX(.95); }
100% { transform : scaleX(1); }
}
/* needs vendor prefixes...*/

highlight anchor links:

<a href="#ref-01">1</a>
...

<ol class="refs">
<li id="ref-01">The Real-Life Don Draper</li>
....
</ol>

.refs li:target {
animation-name : li-fade;
animation-duration : 2s;
animation-iteration-count : 1;
}
@keyframes li-fade {
0% { color : rgb(234,46,34); }
15% { color : rgb(255,255,255);
100% { color : rgb(255,255,255); }
}