Slide 1
Slide 1 text
SMOKE GETS IN YOUR EYES
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
http://www.flickr.com/photos/gifake/sets/72157622341953667/detail/
Slide 6
Slide 6 text
https://developer.mozilla.org/en-US/demos/tag/tech:css3
Slide 7
Slide 7 text
https://developer.mozilla.org/en-US/demos/detail/the-letter-heads
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
https://developer.mozilla.org/en-US/demos/detail/the-planetarium
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
https://developer.mozilla.org/en-US/demos/detail/css-nyan-cat
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
https://developer.mozilla.org/en-US/demos/detail/rofox-css3-animation-by-anthony-calzadilla
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
ANIMATABLE.COM/DEMOS/MADMANIMATION
Madmanimation is for educational purposes only and is not affiliated with the Mad Men TV show.
All American Movie Classics Company LLC. copyrights, trademarks and tradenames are respected.
Slide 16
Slide 16 text
MAD
CSS3TRANSITIONS
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
.lamp {
transition-property : opacity;
}
TRANSITION PROPERTY
Slide 19
Slide 19 text
BACKGROUNDS
COLOURS
FONTS
POSITION
BORDERS
DIMENSIONS
OPACITY
TRANSFORMS
Slide 20
Slide 20 text
TRANSITION PROPERTY
.lamp {
transition-property : opacity, color;
}
Slide 21
Slide 21 text
.lamp {
transition-property : all;
}
TRANSITION PROPERTY
Slide 22
Slide 22 text
.lamp {
transition-duration : .15s;
}
TRANSITION DURATION
Slide 23
Slide 23 text
.lamp {
transition-delay : .1s;
}
TRANSITION DELAY
Slide 24
Slide 24 text
.lamp {
transition-timing-function : linear;
}
TRANSITION TIMING
Slide 25
Slide 25 text
.lamp {
transition : opacity .25s .1s linear;
}
TRANSITION SHORTHAND
Slide 26
Slide 26 text
.lamp {
-webkit-transition : opacity .25s .1s linear;
-ms-transition : opacity .25s .1s linear;
-moz-transition : opacity .25s .1s linear;
-o-transition : opacity .25s .1s linear;
transition : opacity .25s .1s linear;
}
VENDOR PREFIXES
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
button {
background-color : rgb(255,200,50);
-webkit-transition : background-color .25s 0 linear;
-ms-transition : background-color .25s .1s linear;
-moz-transition : background-color .25s .1s linear;
-o-transition : background-color .25s .1s linear;
transition : background-color .25s .1s linear; }
button:hover {
background-color : rgb(255,255,255); }
ANIMATABLE.COM/DEMOS/SMOKEBREAK
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
MAD
KEYFRAMEANIMATION
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
@keyframes lamp {
from { opacity : 0; }
to { opacity : 1; }
}
ANIMATION KEYFRAMES
Slide 33
Slide 33 text
@keyframes lamp {
0% { opacity : 0; }
100% { opacity : 1; }
}
ANIMATION KEYFRAMES
Slide 34
Slide 34 text
@keyframes lamp {
0% { opacity : 0; }
25% { opacity : .5; }
70% { opacity : .25; }
100% { opacity : 1; }
}
ANIMATION KEYFRAMES
Slide 35
Slide 35 text
-webkit-@keyframes lamp { }
-moz-@keyframes lamp { }
ANIMATION KEYFRAMES
Slide 36
Slide 36 text
-webkit-@keyframes lamp { }
-moz-@keyframes lamp { }
-ms-@keyframes lamp { }
@keyframes lamp { }
ANIMATION KEYFRAMES
Slide 37
Slide 37 text
BACKGROUND-COLOR
BACKGROUND (GRADIENTS)
BACKGROUND-POSITION
BORDER-COLOR
BORDER-WIDTH
BORDER-SPACING
BOTTOM
COLOR
FONT-SIZE
FONT-WEIGHT
HEIGHT
LEFT
LETTER-SPACING
LINE-HEIGHT
MARGIN
MAX-HEIGHT
MAX-WIDTH
MIN-HEIGHT
MIN-WIDTH
OPACITY
OUTLINE
PADDING
TEXT-INDENT
TEXT-SHADOW
TOP
VERTICAL-ALIGN
VISIBILITY
WIDTH
Z-INDEX
Slide 38
Slide 38 text
.lamp {
animation-name : lamp;
}
ANIMATION NAME
Slide 39
Slide 39 text
.lamp {
animation-duration : 6s;
}
ANIMATION DURATION
Slide 40
Slide 40 text
.lamp {
animation-delay : 1500ms;
}
ANIMATION DELAY
Slide 41
Slide 41 text
.lamp {
animation-iteration-count : 1;
}
ANIMATION ITERATIONS
Hint: [number] [infinite]
Slide 42
Slide 42 text
.lamp {
animation-timing-function : linear;
}
ANIMATION TIMING
Hint: [ease] [ease-in] [ease-out] [ease-in-out] [linear]
Slide 43
Slide 43 text
.lamp {
animation-direction : normal;
}
ANIMATION DIRECTION
Hint: [normal] [alternate]
Slide 44
Slide 44 text
.lamp {
animation : 6s 1500ms 1 linear normal;
}
ANIMATION SHORTCUT
Slide 45
Slide 45 text
VENDOR PREFIXES
.lamp {
-webkit-animation : 6s 1500ms;
-ms-animation : 6s 1500ms;
-moz-animation : 6s 1500ms;
animation : 6s 1500ms;
}
Slide 46
Slide 46 text
MAD
MADMANIMATIONS
Slide 47
Slide 47 text
SCENE ONE
Slide 48
Slide 48 text
Slide 49
Slide 49 text
#curtain {
background-color : rgb(0,0,0);
opacity : 0;
}
ANIMATE OPACITY
@keyframes fade {
0% { opacity : 1; }
100% { opacity : 0; }
}
Slide 50
Slide 50 text
#curtain {
background-color : rgb(0,0,0);
opacity : 0;
animation-name : fade;
animation-duration : 2s;
animation-iteration-count : 1;
}
ANIMATE OPACITY
@keyframes fade {
0% { opacity : 1; }
100% { opacity : 0; }
}
Slide 51
Slide 51 text
MAD
CSS3TRANSFORMS
Slide 52
Slide 52 text
TRANSLATE
SCALE
ROTATE
SKEW
Slide 53
Slide 53 text
TRANSFORM SCALE X
.don {
transform : scaleX(1.5);
}
Slide 54
Slide 54 text
TRANSFORM SCALE Y
.don {
transform : scaleY(1.5);
}
Slide 55
Slide 55 text
TRANSFORM SCALE
.don {
transform : scale(1.5);
}
Slide 56
Slide 56 text
TRANSFORM SCALE
.don {
transform : scale(.5);
}
Slide 57
Slide 57 text
#don {
animation-name : don;
animation-duration : 6s;
animation-delay : 500ms;
animation-iteration-count : 1;
}
ANIMATE SCALE
Slide 58
Slide 58 text
@keyframes don {
0% { transform : scale(1.05); }
100% { transform : scale(.8); }
}
ANIMATE SCALE
Slide 59
Slide 59 text
#background {
animation-name : background;
animation-duration : 6s;
animation-delay : 1s;
animation-iteration-count : 1;
}
ANIMATE SCALE
Slide 60
Slide 60 text
@keyframes background {
0% { transform : scale(1.05); }
100% { transform : scale(1); }
}
ANIMATE SCALE
Slide 61
Slide 61 text
SCENE THREE
SCENE THREE
Slide 62
Slide 62 text
Slide 63
Slide 63 text
TRANSFORM TRANSLATE X
.don {
transform : translateX(100px);
}
Slide 64
Slide 64 text
TRANSFORM TRANSLATE Y
.don {
transform : translateY(100px);
}
Slide 65
Slide 65 text
TRANSFORM TRANSLATE
.don {
transform : translate(-100px 100px);
}
Slide 66
Slide 66 text
SCENE THREE
Slide 67
Slide 67 text
#brief {
top : -45px;
left : 435px;
animation-name : case;
animation-duration 1s;
}
ANIMATE TRANSLATE
Slide 68
Slide 68 text
@keyframes case {
0% {
transform : translate(0,0); }
65% {
transform : translate(0,135px); }
100% {
transform : translate(0,130px); }
}
ANIMATE TRANSLATE
Slide 69
Slide 69 text
#shadow {
top : 540px;
left : 435px;
animation-name : shadow;
animation-duration 1s;
}
ANIMATE TRANSLATE
Slide 70
Slide 70 text
@keyframes shadow {
0% {
transform : translate(0,0); }
65% {
transform : translate(0,-135px); }
100% {
transform : translate(0,-130px); }
}
ANIMATE TRANSLATE
Slide 71
Slide 71 text
#blinds {
top : 30px;!
left : 610px;
animation : blinds 2s 1s 1;
}
#slat {
top : 30px;!
left : 612px;
animation : slat 2s 1500ms 1;
}
Slide 72
Slide 72 text
@keyframes blinds {
0% {
transform : translate(0,0); }
100% {
transform : translate (0,100px); }
}
@keyframes slat {
0% {
transform : translate(0,0); }
100% {
transform : translate (0,150px); }
}
Slide 73
Slide 73 text
SCENE THREE
ANIMATE TRANSLATE
Slide 74
Slide 74 text
SCENE NINE
Slide 75
Slide 75 text
Aarron Walter
Alexa Andrzejewski and Jeffrey Veen
Slide 76
Slide 76 text
TRANSFORM ROTATE
.don {
transform : rotate(90deg);
}
Slide 77
Slide 77 text
TRANSFORM ROTATE
.don {
transform : rotate(-90deg);
}
Slide 78
Slide 78 text
Donald Francis “Don” Draper is a fictional character
and the protagonist of AMC’s television series
Mad Men. He is portrayed by 2008 Golden
Globe winner Jon Hamm. Until the
third season finale, Draper was
Creative Director of Manhattan
advertising firm Sterling Cooper. He
became a founding partner at a new firm,
Sterling Cooper Draper Pryce, after he and
his superiors abandoned their old agency in
advance of an unwanted acquisition. Draper's
character is partially based on Draper Daniels, the
creative head of the Leo Burnett advertising agency
in Chicago in the 1950s who created the Marlboro
Man campaign.
Slide 79
Slide 79 text
Donald Francis “Don” Draper is a fictional
character and the protagonist of AMC’s
television series Mad Men. He is portrayed
by 2008 Golden Globe winner Jon Hamm.
Until the third season finale, Draper was
Creative Director of Manhattan advertising
firm Sterling Cooper. He became a founding
partner at a new firm, Sterling Cooper Draper
Pryce, after he and his superiors abandoned
their old agency in advance of an unwanted
acquisition. Draper's character is partially
based on Draper Daniels, the creative head
of the Leo Burnett advertising agency in
Chicago in the 1950s who created the
Marlboro Man campaign.
Slide 80
Slide 80 text
TRANSFORM ORIGIN
Slide 81
Slide 81 text
TRANSFORM ORIGIN
.don {
transform-origin : 0 0;
}
Slide 82
Slide 82 text
TRANSFORM ORIGIN
.don {
transform-origin : 50% 0;
}
Slide 83
Slide 83 text
TRANSFORM ORIGIN
.don {
transform-origin : 100% 0;
}
Slide 84
Slide 84 text
TRANSFORM ORIGIN
.don {
transform-origin : 0 100%;
}
Slide 85
Slide 85 text
TRANSFORM ORIGIN
.don {
transform-origin : 100% 100%;
}
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
#don {
top : -200px;
left : 160px;
transform-origin : 50% 50%;
animation-name : don;
animation-duration : 3500ms;
animation-iteration-count : 1;
}
ANIMATE ROTATE
Slide 88
Slide 88 text
@keyframes don {
0% {
transform : translate(0,0)
rotate(0deg); }
100% {
transform : translate(50px,820px)
rotate(-20deg); }
}
Slide 89
Slide 89 text
@keyframes don {
0% {
transform : translate(0,0)
rotate(0deg); }
100% {
transform : translate(50px,820px)
rotate(-20deg); }
}
Slide 90
Slide 90 text
#background {
width : 1400px;
height : 740px;
transform-origin : 0% 50%;
animation-name : background;
animation-duration : 3s;
animation-iteration-count : 1;
}
ANIMATE TRANSLATE
Slide 91
Slide 91 text
@keyframes background {
0% {
transform : translate(0,0); }
100% {
transform : translate(-150px,-160px); }
}
Slide 92
Slide 92 text
ANIMATE ROTATE
Slide 93
Slide 93 text
ANIMATABLE.COM/DEMOS/MADMANIMATION
Madmanimation is for educational purposes only and is not affiliated with the Mad Men TV show.
All American Movie Classics Company LLC. copyrights, trademarks and tradenames are respected.
Slide 94
Slide 94 text
No content
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
Why has Edge gone with div-based animation?
I was deeply saddened to see that not only were
divs used in the example files that you released,
but that divs are the default option for the stage
and any other element that is added to it.
– Rob Hawkes
http://forums.adobe.com/thread/884525
Slide 100
Slide 100 text
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
http://hacks.mozilla.org/2011/08/living-
on-the-edge-new-adobe-animation-tool-
sparks-necessary-conversations/
Slide 101
Slide 101 text
- […]
- […]
- […]
- […]
- […]
- […]
- […]
- […]
- […]
- […]
- […]
- […]
- […]
- […]
- […]
- […]
Slide 102
Slide 102 text
-
Don Draper pauses in the doorway of his Manhattan office. Everything except fan blades are still. Don’s desk is littered with bottles.
-
Don walks slowly into the room, his shoes reflected in the highly polished floor.
!
-
As Don puts down his briefcase, we begin to get a sense that everything may not be as it seems in his world.
-
Magazines begin falling to the floor.
[…]
Slide 103
Slide 103 text
No content
Slide 104
Slide 104 text
$(document).ready(function() {
!
if (Modernizr.cssanimations) {
$("#scene-01").append('
');
}
});
Slide 105
Slide 105 text
$(document).ready(function() {
!
if (Modernizr.cssanimations) {
$("#scene-01").append('
');
}
});
$("h1").prepend('Watch ')
Slide 106
Slide 106 text
Jeffrey Zeldman
Sarah Parmenter
Slide 107
Slide 107 text
.cssanimations #animation {
width : 1024px;
height : 579px; }
.cssanimations #animation li {
display : none; }
.cssanimations #animation li.go {
display : block;
height : 579px; }
.cssanimations #animation li p {
visibility : hidden; }
Slide 108
Slide 108 text
#animation {
width : 1024px;
height : 579px; }
#animation li {
display : none; }
#animation li.go {
display : block;
height : 579px; }
#animation li p {
visibility : hidden; }
Slide 109
Slide 109 text
No content
Slide 110
Slide 110 text
.no-cssanimations #animation {
list-style-type : none;
width : 80%;
max-width : 1024px; }
.no-cssanimations #animation li {
float : left;
margin : 0 4% 1.5em 0;
width : 21%;
padding-top : 130px; }
.no-cssanimations li#scene-01 {
background : url(scene-01.jpg) no-repeat 0 0; }
Slide 111
Slide 111 text
No content
Slide 112
Slide 112 text
No content
Slide 113
Slide 113 text
No content
Slide 114
Slide 114 text
http://daneden.me/animate/
Slide 115
Slide 115 text
No content
Slide 116
Slide 116 text
ANIMATABLE.COM/DEMOS/SMOKEBREAK
*:hover {
animation-name : spin;
animation-duration : 10s;
animation-iteration-count : infinite;
animation-direction : alternate; }
@keyframes spin {
0% { transform : rotate(0deg); }
100% { transform : rotate(360deg); }
}
* Vendor specific prefixes required
Slide 117
Slide 117 text
No content
Slide 118
Slide 118 text
No content
Slide 119
Slide 119 text
.logo:hover {
animation-name : logo;
animation-duration : 1s;
animation-iteration-count : infinite; }
* Vendor specific prefixes required
SMOKEBREAK
Slide 120
Slide 120 text
.logo:hover {
animation-name : logo;
animation-duration : 1s;
animation-iteration-count : infinite; }
* Vendor specific prefixes required
@keyframes logo {
0% { transform : scaleX(1); }
50% { transform : scaleX(.95); }
100% { transform : scaleX(1); }
}
SMOKEBREAK
Slide 121
Slide 121 text
No content
Slide 122
Slide 122 text
fieldset:hover {
animation-name : fieldset;
animation-duration : 6s;
animation-iteration-count : infinite; }
* Vendor specific prefixes required
SMOKEBREAK
Slide 123
Slide 123 text
fieldset:hover {
animation-name : fieldset;
animation-duration : 6s;
animation-iteration-count : infinite; }
* Vendor specific prefixes required
@keyframes fieldset {
0% { border-color : rgba(255,255,255,0); }
50% { border-color : rgb(234,46,34); }
100% { border-color : rgba(255,255,255,0); }
}
SMOKEBREAK
Slide 124
Slide 124 text
No content
Slide 125
Slide 125 text
.error {
animation-name : error;
animation-duration : 5s;
animation-iteration-count : infinite; }
* Vendor specific prefixes required
@keyframes error {
0% { border-color : rgba(255,255,255,.2); }
50% { border-color : rgb(255,0,0); }
100% { border-color : rgba(255,255,255,.2); }
}
SMOKEBREAK
Slide 126
Slide 126 text
.error::-webkit-input-placeholder {
color : rgb(255,255,255); }
.error:-moz-placeholder {
color : rgb(255,255,255); }
SMOKEBREAK
Slide 127
Slide 127 text
No content
Slide 128
Slide 128 text
6
- The Real-Life Don Draper
- Top 49 Most Influential Men
- The Mountain King
- Mad Men The Color Blue
- The Jet Set. Mad Men. AMC.
- Public Relations
- Hill, Logan
- Secret of Draper’s Sex Appeal
- Sad Don Draper
- What Would Don Draper Do?
Slide 129
Slide 129 text
ANIMATABLE.COM/DEMOS/SMOKEBREAK
.refs li:target {
animation-name : li-fade;
animation-duration : 2s;
animation-iteration-count : 1; }
* Vendor specific prefixes required
Slide 130
Slide 130 text
ANIMATABLE.COM/DEMOS/SMOKEBREAK
.refs li:target {
animation-name : li-fade;
animation-duration : 2s;
animation-iteration-count : 1; }
* Vendor specific prefixes required
@keyframes li-fade {
0% { color : rgb(234,46,34); }
15% { color : rgb(255,255,255);
100% { color : rgb(255,255,255); }
}
Slide 131
Slide 131 text
MAD
ANTHONY CALZADILLA @ACALZADILLA
GERI COADY @HELLOGERI
ANDY CLARKE @MALARKEY
Original photography by Geri Coady, Nate Croft, Kat Durrant,
Peter Hart, Mark Jaquith, Chris Jennings, Jeremy Keith,
Maykel Loomans, John Morrison - Subism.com, Stefan
Nitzsche, Warren Parsons and Jeffrey Zeldman.
Anthony Calzadilla appears courtesy of
Optimum7 Internet Marketing