Slide 1
Slide 1 text
Web 920
CSS3 Animations
& Transitions
Patrick Rauland
@bftrick
Slide 2
Slide 2 text
About Me
Slide 3
Slide 3 text
Transitions
● Any CSS change based on an element's
state
○ hover states
○ adding a class via js
● All CSS, no JS or Flash
Slide 4
Slide 4 text
Transitions
#my-element {
transition: all 2s linear;
}
Slide 5
Slide 5 text
Transitions
#my-element {
transition-property: all;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 500ms;
}
Slide 6
Slide 6 text
Transitions
#my-element {
transition-property: all;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 500ms;
}
● The list of
properties to
transition
● ex.
○ height
○ opacity
○ font-size
○ all
○ etc
Slide 7
Slide 7 text
Transitions
#my-element {
transition-property: all;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 500ms;
}
● Duration
● Ex.
○ 2s
○ 2000 ms
Slide 8
Slide 8 text
Transitions
#my-element {
transition-property: all;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 500ms;
}
● Easing
● Ex.
○ linear
○ ease-in
○ ease-out
○ ease-in-out
Slide 9
Slide 9 text
Transitions
#my-element {
transition-property: all;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 500ms;
}
● Delay
● Ex.
○ 2s
○ 2000ms
Slide 10
Slide 10 text
Transitions - Browser Support
● Firefox
● Webkit
○ Safari
○ Chrome
● Opera
● IE 10+
● Webkit requires a prefix:
○ -webkit-transition
Slide 11
Slide 11 text
Transitions - Examples
● http://burnhamrichards.com/
● http://optimalweb.biz/
Slide 12
Slide 12 text
Animations
● A set of CSS states (keyframes)
Slide 13
Slide 13 text
Madmanimation
http://stuffandnonsense.co.
uk/content/demo/madmanimation/
Slide 14
Slide 14 text
Animations
#my-element {
animation: my-animation 5s;
}
@keyframes my-animation {
0% {background: red;}
50% {background: blue;}
100% {background: green;}
}
Slide 15
Slide 15 text
Animations
● Let's see that code in action!
● http://jsfiddle.
net/BFTrick/dJ44G/embedded/result/
Slide 16
Slide 16 text
Animations
div {
animation-name: my-animation;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count:
infinite;
animation-direction: alternate;
animation-play-state: running;
}
● Name of animation
Slide 17
Slide 17 text
Animations
div {
animation-name: my-animation;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count:
infinite;
animation-direction: alternate;
animation-play-state: running;
}
● Duration
● Ex.
○ 5s
○ 5000ms
Slide 18
Slide 18 text
Animations
div {
animation-name: my-animation;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count:
infinite;
animation-direction: alternate;
animation-play-state: running;
}
● Easing
● Ex.
○ linear
○ ease-in
○ ease-out
○ ease-in-out
Slide 19
Slide 19 text
Animations
div {
animation-name: my-animation;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count:
infinite;
animation-direction: alternate;
animation-play-state: running;
}
● Delay
Slide 20
Slide 20 text
Animations
div {
animation-name: my-animation;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count:
infinite;
animation-direction: alternate;
animation-play-state: running;
}
● Count
● Ex.
○ 1
○ 2
○ 3
○ infinite
Slide 21
Slide 21 text
Animations
div {
animation-name: my-animation;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count:
infinite;
animation-direction: alternate;
animation-play-state: running;
}
● Direction of
keyframes
● Ex.
○ normal
○ alternate
○ reverse
Slide 22
Slide 22 text
Animations
div {
animation-name: my-animation;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count:
infinite;
animation-direction: alternate;
animation-play-state: running;
}
● On/off switch
Slide 23
Slide 23 text
Animations
@keyframes my-animation {
0% {
background: red;
left:0px;
top:0px;
}
100% {
background: blue;
left:200px;
top:200px;
}
}
● Name of animation
Slide 24
Slide 24 text
Animations
@keyframes my-animation {
0% {
background: red;
left:0px;
top:0px;
}
100% {
background: blue;
left:200px;
top:200px;
}
}
● Keyframe position
● Unlimited
keyframes
● Alternate notation:
○ to
○ from
Slide 25
Slide 25 text
Animations
@keyframes my-animation {
0% {
background: red;
left:0px;
top:0px;
}
100% {
background: blue;
left:200px;
top:200px;
}
}
● CSS styles
● Can be just about
anything
Slide 26
Slide 26 text
Animations - Browser Support
● Firefox
● Webkit
○ Safari
○ Chrome
● Opera
● IE 10+
● Webkit requires a prefix:
○ -webkit-transition
Slide 27
Slide 27 text
Animations - Examples
● http://cleangrooves.net/
● http://production.mcl.bz/
● http://www.enstromhelicopter.com/
Slide 28
Slide 28 text
Animations - Code Samples
● http://daneden.me/animate/
● http://www.spritely.net/
Slide 29
Slide 29 text
Animations - Inspiration
● http://codepen.io/
● http://codepen.io/soulwire/pen/EKmwC
● http://codepen.io/SaraSoueidan/pen/sBELl