Slide 1
Slide 1 text
Animations
& Transitions
1
Slide 2
Slide 2 text
2
Peter Gasston
@stopsatgreen
Slide 3
Slide 3 text
3
1. The past
2. The present
2.1. Transitions
2.2. Animations
2.3. Performance
2.4. Soft skills
3. The future
Slide 4
Slide 4 text
Animated Timeline
4
![]()
Mosaic 1.0
IE2
NN1.1 IE3
1993 1995 1996
Slide 5
Slide 5 text
DHTML!
$(foo).animate({
height: '50%',
opacity: 0.25,
});
function doMove() {
foo.style.left = (foo.style.left+10)+'px';
setTimeout(doMove,20);
}
Slide 6
Slide 6 text
Animated Timeline
![]()
<style>
Mosaic 1.0
IE2
NN1.1 IE3 Safari 3
1993 1995 1996 2007
Slide 7
Slide 7 text
Animations
& Transitions
Slide 8
Slide 8 text
Hooray!
Except that implementation is incomplete,
not in accordance with the spec, and has
many bugs. But otherwise, yes: Hooray!
Slide 9
Slide 9 text
-webkit- prefixed in Safari 6
Unprefixed in Safari 7 and all other modern browsers
Transitions
Slide 10
Slide 10 text
Transitions
E { transition: 1s; }
Slide 11
Slide 11 text
Transitions
transition- property
duration
delay
timing-function
Slide 12
Slide 12 text
Transitions
all
property
none
transition-property:
Slide 13
Slide 13 text
Transitions
0
ns || nms
transition-duration:
Slide 14
Slide 14 text
Transitions
0
ns || nms
-ns || -nms
transition-delay:
Slide 15
Slide 15 text
Transitions
.foo { transition-duration: -1s;}
by ~nerdsman567 on Deviant Art
Slide 16
Slide 16 text
Transitions
cubic-bezier()
steps()
keyword
transition-timing-function:
Slide 17
Slide 17 text
Transitions
cubic-bezier(.1,.35,.9,.7)
p0 = 0,0
p3 = 1,1
p2 = .9,.7
p1 = .1,.35
Slide 18
Slide 18 text
Transitions
cubic-bezier(.1,.35,.9,.7)
Slide 19
Slide 19 text
Transitions
ease-in ease-in-out
ease-out
Slide 20
Slide 20 text
Transitions
steps()
steps(4,start) steps(4,end)
Slide 21
Slide 21 text
Steps
Slide 22
Slide 22 text
Steps
step-start step-end
Slide 23
Slide 23 text
Steps
Slide 24
Slide 24 text
Multiple Transitions
.foo {
transition:
height 1s ease-in,
color 1.5s linear;
}
Slide 25
Slide 25 text
Multiple Transitions
.foo {
transition-property: height, color;
transition-duration: 1s, 1.5s;
transition-timing-function: ease-in;
}
Slide 26
Slide 26 text
Multiple Transitions
.foo {
transition-property: A, B, C, D;
transition-duration: x, y, z;
}
Ax, By, Cz, Dx
Slide 27
Slide 27 text
Pop Quiz
.foo {
transition:
height 1s ease-in,
none 1.5s linear;
}
✗
Slide 28
Slide 28 text
Multiple Transitions
.foo {
transition:
gorilla 1s,
color 5s;
}
Slide 29
Slide 29 text
Multiple Transitions
“…unrecognized or non-animatable
properties must be kept in the list to
preserve the matching of indices.”
Slide 30
Slide 30 text
Multiple Transitions
Firefox
Chrome
Slide 31
Slide 31 text
Multiple Transitions
.foo {
transition-property: gorilla, color;
transition-duration: 1s, 5s;
}
/* Firefox */
.foo { transition: color 5s; }
/* WebKit / Blink */
.foo { transition: all 5s; }
Slide 32
Slide 32 text
-webkit- prefixed in Chrome and Safari
Animations
Slide 33
Slide 33 text
Animations
@keyframes chimp {
100% { background-color: yellow; }
}
Slide 34
Slide 34 text
Animations
@keyframes ☠ {
100% { background-color: yellow; }
}
Slide 35
Slide 35 text
Animations
@keyframes chimp {
0% { background-color: yellow; }
40% { background-color: green; }
100% { background-color: cyan; }
}
0% == from
100% == to
Slide 36
Slide 36 text
Animations
@keyframes chimp {
from, to { width: 100px; }
40% {
background-color: green;
width: 200px;
}
to { background-color: cyan; }
}
Slide 37
Slide 37 text
The Spec Says…
“If a property is not specified for a
keyframe, or is specified but invalid, the
animation of that property proceeds as if
that keyframe did not exist.”
Slide 38
Slide 38 text
Animations
@keyframes chimp {
from {
border-width: 10px;
width: 100px;
}
40% { width: 20px; }
to {
border-width: 1px;
width: 1px;
}
}
Slide 39
Slide 39 text
Animations
.foo { animation: chimp 1s; }
Slide 40
Slide 40 text
Animations
animation- name
duration
delay
timing-function
iteration-count
direction
fill-mode
play-state
Slide 41
Slide 41 text
Animations
@keyframes chimp {
from {
width: 100px;
animation-timing-function: ease-in;
}
40% {
width: 20px;
animation-timing-function: ease-out;
}
to { width: 1px; }
}
Slide 42
Slide 42 text
Animations
normal
alternate
reverse
alternate-reverse
animation-direction:
Slide 43
Slide 43 text
One Direction
Slide 44
Slide 44 text
Animations
If animation-direction has a value of
reverse or alternate-reverse, the
value of animation-timing-function is
also reversed.
e.g. ease-in becomes ease-out.
Slide 45
Slide 45 text
Animations
none
backwards
forwards
both
animation-fill-mode:
Slide 46
Slide 46 text
Fill Mode
backwards will apply the properties in
the from keyframe before the
animation begins.
forwards will apply the properties in
the to keyframe when the animation
ends.
both will apply the properties in the
from keyframe before the animation
begins, and the properties in the to
keyframe when the animation ends.
Slide 47
Slide 47 text
Fill Mode
div { animation: foo 1s 1s; }
animation-fill-mode: backwards;
animation-fill-mode: forwards;
animation-fill-mode: both;
Slide 48
Slide 48 text
Spec Violation
“When the animation-duration is 0s,
animation-fill-mode still applies.”
But no browser I’ve tested
complies with this.
Slide 49
Slide 49 text
Animations
running
paused
animation-play-state:
Slide 50
Slide 50 text
Multiple Animations
@keyframes one {
to { background-color: red; }
}
@keyframes two {
to {
background-color: blue;
width: 200px;
}
}
div { animation: two 1s, one 1s; }
Slide 51
Slide 51 text
Multiple Animations
div { animation:
foo 1s infinite,
bar 2s 1s alternate-reverse,
baz 500ms alternate infinite;
}
Good luck with that!
Slide 52
Slide 52 text
Rubbish
No @keyframes view
in dev tools. :(
LOL
Slide 53
Slide 53 text
Transitionable
The properties that can be
transitioned are generally those which
accept quantifiable values:
length, color, number, or percentage
http://thewebevolved.com/support/animation/properties/
Slide 54
Slide 54 text
Transitionable
The auto value isn’t quantifiable,
so can’t be animated to or from.
Values inside the calc() function
are, so can be.
Slide 55
Slide 55 text
Transitionable
The visibility property is a special
case: it toggles between hidden and
visible at the end* of the animation,
with no transition.
*or the beginning, depending on your parameters
Slide 56
Slide 56 text
Visibility
Slide 57
Slide 57 text
Transitionable
Some properties will be implicitly
transitioned - e.g. a transition on the
font-size property makes other
properties that have values relative to
it - line-height, margin, etc -
transition also.
The exception is IE10, where only
line-height will be transitioned.
Slide 58
Slide 58 text
Transitionable
You can transition properties
applied to the ::after and ::before
pseudo-elements*.
*except in Safari
Slide 59
Slide 59 text
Transitionable
http://thewebevolved.com/support/animation/properties/
div {
background:
url('foo.png') no-repeat 25% 25%,
url('bar.png') no-repeat 50% 50%,
url('baz.png') no-repeat 75% 75%;
transition: 2s;
}
div:hover {
background-position: 100% 25%, 0 50%, 50% 75%;
}
Slide 60
Slide 60 text
Kittens
Slide 61
Slide 61 text
Spec Violation
“Gradient[s]… must have the same type
(radial or linear) and same number of
stops in order to be animated.”
No browser I’ve tested
complies with this.
Slide 62
Slide 62 text
Transitionable
text { transition: 2s; }
svg:hover rect { fill: green; }
Slide 63
Slide 63 text
Events
transitionend*
*webkitTransitionEnd in Safari
el.addEventListener(
'transitionend',
fooBar
);
Slide 64
Slide 64 text
Events
el.addEventListener(
'transitionend',
function(e) {
var time = e.timeElapsed,
prop = e.propertyName;
});
Slide 65
Slide 65 text
TIL
When shorthand properties are
transitioned, the transitionend event
fires for all of the individual properties.
Except in Chrome and Safari, if you
explicitly state the shorthand property as
the value for transition-property.
Slide 66
Slide 66 text
TIL
Firefox doesn’t fire the transitionend
event when pseudo elements are
transitioned, and the event object doesn’t
contain the pseudoElement attribute.
Slide 67
Slide 67 text
TIL
When you use the all value for
transition-property, the implicit
transitions that fire the transitionend
event vary between browsers.
Slide 68
Slide 68 text
TIL
Firefox in particular fires on some quite
unexpected properties.
div { transition: color 1s; }
Slide 69
Slide 69 text
TIL
Be wary of
transitionend.
Slide 70
Slide 70 text
Events
el.addEventListener('animationstart', foo);
el.addEventListener('animationiteration', foo);
el.addEventListener('animationend', foo);
Slide 71
Slide 71 text
Events
el.addEventListener(
'transitionend',
function(e) {
var time = e.timeElapsed,
anim = e.animationName;
});
Slide 72
Slide 72 text
TIL
In Firefox, the animationstart event
doesn’t fire if the animation begins
before the DOMContentLoaded event.
Slide 73
Slide 73 text
Duh.
The animationend event doesn’t fire
when the animation-iteration property
has a value of infinite.
Slide 74
Slide 74 text
Spec Violation
“When the animation-duration is 0s,
animation-fill-mode still applies…
also, animation events are still fired.”
No browser I’ve tested does this.
Slide 75
Slide 75 text
Performance
“Use CSS keyframe animation or CSS
transitions, if at all possible. The
browser can optimize painting and
compositing bigtime here.”
http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
Slide 76
Slide 76 text
Performance
Chrome uses graphics acceleration
automatically for transitioned elements, but
in Safari, especially for iOS, you may have
to force it:
div { -webkit-transform: rotateY(0deg); }
However…
http://blog.tumult.com/2013/02/28/transform-translate-vs-top-left/
Slide 77
Slide 77 text
Performance
… semi-opaque or transparent
elements may see little tangible
benefit from the rotateY hack - and it
could even reduce performance.
http://blog.tumult.com/2013/02/28/transform-translate-vs-top-left/
Slide 78
Slide 78 text
Obligatory
It depends.
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
CSS3 v jQuery
http://thewebevolved.com/support/animation/properties/
Slide 81
Slide 81 text
Soft Skills
Animation is behaviour.
Slide 82
Slide 82 text
Time
“Animation can help to provide
context. It helps brains understand
how the information flows.”
https://medium.com/design-ux/926eb80d64e3
Slide 83
Slide 83 text
Time
Slide 84
Slide 84 text
Speed
Speed it all up. People aren’t on your
site to admire your animation skills
they’re there to achieve an aim.
Slide 85
Slide 85 text
Technique
http://en.wikipedia.org/wiki/12_basic_principles_of_animation
Slide 86
Slide 86 text
12 Basic Principles
1. Squash and stretch
2. Exaggeration
3. Staging
4. Anticipation
5. Motivation
6. Secondary action
7. Overlap
8. Follow-through
9. Balance
10. Timing
11. Rhythm
12. Camera movement
http://www.digitalartsonline.co.uk/features/illustration/12-rules-of-animation/
Slide 87
Slide 87 text
Exaggeration
div { transition: 1s
cubic-bezier(.3,0,1,1.25)
; }
Slide 88
Slide 88 text
Exaggeration
Slide 89
Slide 89 text
Anime
Slide 90
Slide 90 text
Pokemon
Slide 91
Slide 91 text
P.i.t.a.
http://taybenlor.com/2013/04/19/animating-with-physics.html
Slide 92
Slide 92 text
The Future
var anim = el.animate({}, t);
var anim = el.animate({color:'red'}, 2);
https://dvcs.w3.org/hg/FXTF/raw-file/default/web-anim/index.html
Slide 93
Slide 93 text
The Future
var anim = new Animation(el, {color:'red'}, 2);
document.timeline.play(anim);
var anim = new Animation(
el,
{color:'red'},
{
iterationDuration: 3,
playbackRate: 2
}
);
Slide 94
Slide 94 text
The Future
var animA = new Animation(eA, {opacity:0}, 2),
animB = new Animation(eB, animA.effect, 4);
Slide 95
Slide 95 text
Future Events
el.addEventListener('timingstart', foo);
el.addEventListener('timingiteration', foo);
el.addEventListener('timingend', foo);
el.addEventListener('timingcancel', foo);
Slide 96
Slide 96 text
The Future
Advanced easing, path-based
animation, parallelization,
synchronization, interrupting
and adapting.
Slide 97
Slide 97 text
Learn More
http://tympanus.net/codrops/category/playground/
Slide 98
Slide 98 text
Learn More
http://codepen.io
Slide 99
Slide 99 text
Bibliography
http://coding.smashingmagazine.com/
2013/04/26/css3-transitions-thank-god-
specification/
http://coding.smashingmagazine.com/
2011/09/14/the-guide-to-css-animation-
principles-and-examples/
http://coding.smashingmagazine.com/
2013/03/04/animating-web-gonna-need-bigger-
api/
99
Slide 100
Slide 100 text
Fin.