Smoke Gets In Your Eyes

Animation on the web has traditionally been low-fidelity and shares much common ground with the work of early animators. Web animations have always been the domain of Flash because equivalents couldn’t easily be created using open standards. That is until now, with ever increasing support for CSS3 Animations. Learn about the latest CSS animation techniques and how to create effective, accessible fallbacks for all browsers, including those with limited capabilities.

Transcript

1. SMOKE GETS IN YOUR EYES
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. http://www.flickr.com/photos/gifake/sets/72157622341953667/detail/
   

   View Slide

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

   View Slide

7. https://developer.mozilla.org/en-US/demos/detail/the-letter-heads
   

   View Slide

8. View Slide

9. https://developer.mozilla.org/en-US/demos/detail/the-planetarium
   

   View Slide

10. View Slide

11. https://developer.mozilla.org/en-US/demos/detail/css-nyan-cat
    

    View Slide

12. View Slide

13. https://developer.mozilla.org/en-US/demos/detail/rofox-css3-animation-by-anthony-calzadilla
    

    View Slide

14. View Slide

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

    View Slide

16. MAD
    CSS3TRANSITIONS
    

    View Slide

17. View Slide

18. .lamp {
    transition-property : opacity;
    }
    TRANSITION PROPERTY
    

    View Slide

19. BACKGROUNDS
    COLOURS
    FONTS
    POSITION
    BORDERS
    DIMENSIONS
    OPACITY
    TRANSFORMS
    

    View Slide

20. TRANSITION PROPERTY
    .lamp {
    transition-property : opacity, color;
    }
    

    View Slide

21. .lamp {
    transition-property : all;
    }
    TRANSITION PROPERTY
    

    View Slide

22. .lamp {
    transition-duration : .15s;
    }
    TRANSITION DURATION
    

    View Slide

23. .lamp {
    transition-delay : .1s;
    }
    TRANSITION DELAY
    

    View Slide

24. .lamp {
    transition-timing-function : linear;
    }
    TRANSITION TIMING
    

    View Slide

25. .lamp {
    transition : opacity .25s .1s linear;
    }
    TRANSITION SHORTHAND
    

    View Slide

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

    View Slide

27. View Slide

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

    View Slide

29. View Slide

30. MAD
    KEYFRAMEANIMATION
    

    View Slide

31. View Slide

32. @keyframes lamp {
    from { opacity : 0; }
    to { opacity : 1; }
    }
    ANIMATION KEYFRAMES
    

    View Slide

33. @keyframes lamp {
    0% { opacity : 0; }
    100% { opacity : 1; }
    }
    ANIMATION KEYFRAMES
    

    View Slide

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

    View Slide

35. -webkit-@keyframes lamp { }
    -moz-@keyframes lamp { }
    ANIMATION KEYFRAMES
    

    View Slide

36. -webkit-@keyframes lamp { }
    -moz-@keyframes lamp { }
    -ms-@keyframes lamp { }
    @keyframes lamp { }
    ANIMATION KEYFRAMES
    

    View Slide

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

    View Slide

38. .lamp {
    animation-name : lamp;
    }
    ANIMATION NAME
    

    View Slide

39. .lamp {
    animation-duration : 6s;
    }
    ANIMATION DURATION
    

    View Slide

40. .lamp {
    animation-delay : 1500ms;
    }
    ANIMATION DELAY
    

    View Slide

41. .lamp {
    animation-iteration-count : 1;
    }
    ANIMATION ITERATIONS
    Hint: [number] [infinite]
    

    View Slide

42. .lamp {
    animation-timing-function : linear;
    }
    ANIMATION TIMING
    Hint: [ease] [ease-in] [ease-out] [ease-in-out] [linear]
    

    View Slide

43. .lamp {
    animation-direction : normal;
    }
    ANIMATION DIRECTION
    Hint: [normal] [alternate]
    

    View Slide

44. .lamp {
    animation : 6s 1500ms 1 linear normal;
    }
    ANIMATION SHORTCUT
    

    View Slide

45. VENDOR PREFIXES
    .lamp {
    -webkit-animation : 6s 1500ms;
    -ms-animation : 6s 1500ms;
    -moz-animation : 6s 1500ms;
    animation : 6s 1500ms;
    }
    

    View Slide

46. MAD
    MADMANIMATIONS
    

    View Slide

47. SCENE ONE
    

    View Slide

48. 
    
    
    
    
    
    
    
    
    
    
    

    View Slide

49. #curtain {
    background-color : rgb(0,0,0);
    opacity : 0;
    }
    ANIMATE OPACITY
    @keyframes fade {
    0% { opacity : 1; }
    100% { opacity : 0; }
    }
    

    View Slide

50. #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; }
    }
    

    View Slide

51. MAD
    CSS3TRANSFORMS
    

    View Slide

52. TRANSLATE
    SCALE
    ROTATE
    SKEW
    

    View Slide

53. TRANSFORM SCALE X
    .don {
    transform : scaleX(1.5);
    }
    

    View Slide

54. TRANSFORM SCALE Y
    .don {
    transform : scaleY(1.5);
    }
    

    View Slide

55. TRANSFORM SCALE
    .don {
    transform : scale(1.5);
    }
    

    View Slide

56. TRANSFORM SCALE
    .don {
    transform : scale(.5);
    }
    

    View Slide

57. #don {
    animation-name : don;
    animation-duration : 6s;
    animation-delay : 500ms;
    animation-iteration-count : 1;
    }
    ANIMATE SCALE
    

    View Slide

58. @keyframes don {
    0% { transform : scale(1.05); }
    100% { transform : scale(.8); }
    }
    ANIMATE SCALE
    

    View Slide

59. #background {
    animation-name : background;
    animation-duration : 6s;
    animation-delay : 1s;
    animation-iteration-count : 1;
    }
    ANIMATE SCALE
    

    View Slide

60. @keyframes background {
    0% { transform : scale(1.05); }
    100% { transform : scale(1); }
    }
    ANIMATE SCALE
    

    View Slide

61. SCENE THREE
    SCENE THREE
    

    View Slide

62. 
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    View Slide

63. TRANSFORM TRANSLATE X
    .don {
    transform : translateX(100px);
    }
    

    View Slide

64. TRANSFORM TRANSLATE Y
    .don {
    transform : translateY(100px);
    }
    

    View Slide

65. TRANSFORM TRANSLATE
    .don {
    transform : translate(-100px 100px);
    }
    

    View Slide

66. SCENE THREE
    

    View Slide

67. #brief {
    top : -45px;
    left : 435px;
    animation-name : case;
    animation-duration 1s;
    }
    ANIMATE TRANSLATE
    

    View Slide

68. @keyframes case {
    0% {
    transform : translate(0,0); }
    65% {
    transform : translate(0,135px); }
    100% {
    transform : translate(0,130px); }
    }
    ANIMATE TRANSLATE
    

    View Slide

69. #shadow {
    top : 540px;
    left : 435px;
    animation-name : shadow;
    animation-duration 1s;
    }
    ANIMATE TRANSLATE
    

    View Slide

70. @keyframes shadow {
    0% {
    transform : translate(0,0); }
    65% {
    transform : translate(0,-135px); }
    100% {
    transform : translate(0,-130px); }
    }
    ANIMATE TRANSLATE
    

    View Slide

71. #blinds {
    top : 30px;!
    left : 610px;
    animation : blinds 2s 1s 1;
    }
    #slat {
    top : 30px;!
    left : 612px;
    animation : slat 2s 1500ms 1;
    }
    

    View Slide

72. @keyframes blinds {
    0% {
    transform : translate(0,0); }
    100% {
    transform : translate (0,100px); }
    }
    @keyframes slat {
    0% {
    transform : translate(0,0); }
    100% {
    transform : translate (0,150px); }
    }
    

    View Slide

73. SCENE THREE
    ANIMATE TRANSLATE
    

    View Slide

74. SCENE NINE
    

    View Slide

75. Aarron Walter
    Alexa Andrzejewski
    and Jeffrey Veen
    
    
    
    
    
    
    

    View Slide

76. TRANSFORM ROTATE
    .don {
    transform : rotate(90deg);
    }
    

    View Slide

77. TRANSFORM ROTATE
    .don {
    transform : rotate(-90deg);
    }
    

    View Slide

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

    View Slide

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

    View Slide

80. TRANSFORM ORIGIN
    

    View Slide

81. TRANSFORM ORIGIN
    .don {
    transform-origin : 0 0;
    }
    

    View Slide

82. TRANSFORM ORIGIN
    .don {
    transform-origin : 50% 0;
    }
    

    View Slide

83. TRANSFORM ORIGIN
    .don {
    transform-origin : 100% 0;
    }
    

    View Slide

84. TRANSFORM ORIGIN
    .don {
    transform-origin : 0 100%;
    }
    

    View Slide

85. TRANSFORM ORIGIN
    .don {
    transform-origin : 100% 100%;
    }
    

    View Slide

86. View Slide

87. #don {
    top : -200px;
    left : 160px;
    transform-origin : 50% 50%;
    animation-name : don;
    animation-duration : 3500ms;
    animation-iteration-count : 1;
    }
    ANIMATE ROTATE
    

    View Slide

88. @keyframes don {
    0% {
    transform : translate(0,0)
    rotate(0deg); }
    100% {
    transform : translate(50px,820px)
    rotate(-20deg); }
    }
    

    View Slide

89. @keyframes don {
    0% {
    transform : translate(0,0)
    rotate(0deg); }
    100% {
    transform : translate(50px,820px)
    rotate(-20deg); }
    }
    

    View Slide

90. #background {
    width : 1400px;
    height : 740px;
    transform-origin : 0% 50%;
    animation-name : background;
    animation-duration : 3s;
    animation-iteration-count : 1;
    }
    ANIMATE TRANSLATE
    

    View Slide

91. @keyframes background {
    0% {
    transform : translate(0,0); }
    100% {
    transform : translate(-150px,-160px); }
    }
    

    View Slide

92. ANIMATE ROTATE
    

    View Slide

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

    View Slide

94. View Slide

95. View Slide

96. 
    

    View Slide

97. View Slide

98. View Slide

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

    View Slide

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

     View Slide

101. 
     […]
     […]
     […]
     […]
     […]
     […]
     […]
     […]
     […]
     […]
     […]
     […]
     […]
     […]
     […]
     […]
     
     

     View Slide

102. 
     
     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.
     
     […]
     
     

     View Slide

103. View Slide

104. $(document).ready(function() {
     !
     if (Modernizr.cssanimations) {
     $("#scene-01").append('
     
     
     
     ');
     }
     });
     

     View Slide

105. $(document).ready(function() {
     !
     if (Modernizr.cssanimations) {
     $("#scene-01").append('
     
     
     
     ');
     }
     });
     $("h1").prepend('Watch ')
     

     View Slide

106. 
     id="fan-01">alt="">alt="">
     
     Jeffrey Zeldmanid="r-shadow">id="l-shadow">id="r-leg-02">alt="">!
     
     Sarah Parmenterid="bg-03">id="legs-03">id="multi-slats-03">alt="">src="images/03-suitcase.png" alt="">
     
     

     View Slide

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

     View Slide

108. #animation {
     width : 1024px;
     height : 579px; }
     #animation li {
     display : none; }
     #animation li.go {
     display : block;
     height : 579px; }
     #animation li p {
     visibility : hidden; }
     

     View Slide

109. View Slide

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

     View Slide

111. View Slide

112. View Slide

113. View Slide

114. http://daneden.me/animate/
     

     View Slide

115. View Slide

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

     View Slide

117. View Slide

118. View Slide

119. .logo:hover {
     animation-name : logo;
     animation-duration : 1s;
     animation-iteration-count : infinite; }
     * Vendor specific prefixes required
     SMOKEBREAK
     

     View Slide

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

     View Slide

121. View Slide

122. fieldset:hover {
     animation-name : fieldset;
     animation-duration : 6s;
     animation-iteration-count : infinite; }
     * Vendor specific prefixes required
     SMOKEBREAK
     

     View Slide

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

     View Slide

124. View Slide

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

     View Slide

126. .error::-webkit-input-placeholder {
     color : rgb(255,255,255); }
     .error:-moz-placeholder {
     color : rgb(255,255,255); }
     SMOKEBREAK
     

     View Slide

127. View Slide

128. 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?
     
     SMOKEBREAK
     

     View Slide

129. ANIMATABLE.COM/DEMOS/SMOKEBREAK
     .refs li:target {
     animation-name : li-fade;
     animation-duration : 2s;
     animation-iteration-count : 1; }
     * Vendor specific prefixes required
     

     View Slide

130. 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); }
     }
     

     View Slide

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

     View Slide