1

CREATING BEAUTIFULCSS ANIMATIONS

@RAMISAYARFITC Amsterdam 2016

2 . 1

AGENDAHistory of Animation on the WebIntroducing CSS3 AnimationsBrowser CompatibilityCSS3 Animation LibrariesPrinciples for Beautiful Animations

2 . 2

ASSUMPTIONSYou know what the web is…Working knowledge of HTML5 & CSS3.Slides will be made available on SlideShare.net/RamiSayar

2 . 32 . 43 . 1

3 . 2

CAMERON'S WORLD

4 . 1

AND THEN THERE WASFLASH

4 . 2

IT WAS A VERY DARK TIME FOR THEWEB. I CAN’T BELIEVE THIS STILL

...EXISTS

4 . 3

CLASSIC FLASHANIMATIONS

4 . 4

Hop It - Simon's Cat

4 . 5

Animator vs. Animation (original)

4 . 6

Animator vs. Animation II (original)

4 . 7

THINGS DIDN'T ENDWELL...

4 . 8

APRIL 2010, STEVE JOBS WRITES“THOUGHTS ON FLASH”

4 . 94 . 10

RIP FLASH. 2015

4 . 11

BUT ONE MORE FOR OLD TIMES SAKESketchy Ice Creams from Birdbox Studio

5 . 1

WHILE FLASH EXISTED, WE HADJAVASCRIPT & DHTML

5 . 2

DHTML IS THE COMBINATION OF HTML,CSS AND JAVASCRIPT.

Animate text and images in their document, independentlymoving each element from any starting point to any endingpoint, following a predetermined path or one chosen by theuser.Embed a ticker that automatically refreshes its content withthe latest news, stock quotes, or other data.Use a form to capture user input, and then process, verify andrespond to that data without having to send data back to theserver.Include rollover buttons or drop-down menus.

5 . 3

DRUNK HARLEQUIN TEXT

5 . 4

DHTML CODE SAMPLEfunction splat(text){ // randomize text color, size, and weight text=text.substring(0,text.length); var fs=.5 for(i=0;text.length > i;i++){ f=Math.random(); if (Math.abs(f-fs) < .11) {f=Math.random()}; if (Math.abs(f-fs) < .11) {f=Math.random()}; if (f<.1) {c='00ffff'}; if (f>=.1 && f<.2) {c='7cfc00'}; if (f>=.2 && f<.3) {c='6495ed'}; if (f>=.3 && f<.4) {c='ffd700'}; if (f>=.4 && f<.5) {c='ff7f50'}; if (f>=.5 && f<.6) {c='ff00ff'}; if (f>=.6 && f<.7) {c='ccff00'}; if (f>=.7 && f<.8) {c='ff6964'}; if (f>=.8 && f<.9) {c='ff4500'}; if (f>=.9) {c='dc143c'};

6

JAVASCRIPT AND HTML5 CANVASEXAMPLES:

Tearable ClothFree Rider HD

Canvas is great for big, complex animations but it absolutelykills accessibility on your website. Not to mention that the

JavaScript code quickly becomes complicated.

7

HISTORY OF ANIMATIONS ON THE WEB1987 – Initial release of Graphics Interchange Format1996 – Initial release of Adobe Flash Player1997 – Netscape releases the “layers” feature in Netscape 4.

Layers was a precursor to div. Subsequently, dropped fordivs.JavaScript animations popular, part of a set of techniquescalled Dynamic HTML. Standards movement contributed todeath of DHTML.

2004 – HTML5 Canvas Introduced by Apple in WebKit.2008 – Initial release of Animated Portable Network Graphics(apng)2009 – Initial Draft of CSS Animations (CSS3 Module)2012-2016 – Resurgence of GIF in popularity???

89 . 1

INTRODUCING CSS3ANIMATIONS

9 . 2

INTRODUCING CSS3 ANIMATIONSCSS3 Animations can be performed with 3 differenttechniques:

TransitionsTransformsAnimations (Narrow Definition)

10 . 1

CSS3 TRANSITIONS

10 . 2

CSS3 TRANSITIONStransition: [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ]

transition-property includes color, width, height, background-color, padding, margin, top, right, bottom, left, font-size, font-

weight, etc.

See W3C Spec.

10 . 3

CSS3 TRANSITIONStransition: [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ]

transition-duration is how long the animation takes in seconds.

transition-delay is how long the animation waits beforechanging the transition-property.

10 . 4

CSS3 TRANSITIONStransition: [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ]

transition-timing-function determines how intermediate valuesof the transition are calculated. Only two classes of timing

functions: cubic-bezier() and steps() functions.

10 . 5

CSS3 TRANSITIONS – TIMINGFUNCTIONS

Reference MDN

10 . 6

CSS3 TRANSITIONS – CUBIC-BEZIER()cubic-bezier() defines a cubic Bézier curveCurves are continuous, sometimes called easing functions.

Reference MDN

10 . 7

CSS3 TRANSITIONS – CUBIC-BEZIER()Defined by four points P0, P1, P2, and P3. P0 and P3 are thestart and the end of the curve.In CSS3, P0 is always set to (0, 0) and represents the initialtime and the initial state, P3 is (1, 1) and represents the finaltime and the final state.

Reference MDN

CSS3 TRANSITIONS – CUBIC-BEZIER()

10 . 8

Reference MDN

10 . 9

CSS3 TRANSITIONS – CUBIC-BEZIER()Invalid curves are possible and cause the entire property to beignored.P1 or P2 ordinate outside the [0, 1] range maygenerate bouncing effects.cubic-bezier(x1, y1, x2, y2);

10 . 10

CSS3 TRANSITIONS – CUBIC-BEZIER()Common cubic bezier are named in CSS3.Cheat Sheet easings.net

10 . 11

CSS3 TRANSITIONS – STEPS()steps(number_of_steps, direction) defines a step functionwith the direction indicating if it’s left/right-continuous.Direction is specified with start||end.

Reference MDN

CSS3 TRANSITIONS – STEPS()steps(2, start);

10 . 12Reference MDN

11 . 1

CSS3 TRANSFORMS2D TRANSFORMS:

transform: skew(x, y | <angle>) || scale(x, y | <length> or <percentage>) || rotate(angle | <angle>) || translate(x, y | <length> or <percentage>)

11 . 2

CSS3 2D TRANSFORMS CODE SAMPLE

#twodtrans-1{ transform: skew(10deg, 10deg); } #twodtrans-2{ transform: scale(2, 1); } #twodtrans-3{ transform: rotate(60deg); } #twodtrans-4{ transform: translate(-10px, 50px); }

11 . 3

CSS3 TRANSFORMS3D TRANSFORMS:

transform: translate3d(x, y, z | <length> or <percentage>) /* Except z=<length> */ || scale3d(x, y, z | <number>) || rotateX(<angle>) || rotateY(<angle>) || rotateZ(<angle>)

Perspective and perspective-origin set user’s perspective andvanishing point.

There are other properties like: transform-box, transform-origin,transform-style, backface-visibility.

11 . 4

CSS3 3D TRANSFORMS CODE SAMPLE

#threedtrans-1{ transform: rotateX(180deg); } #threedtrans-2{ transform: rotateY(180deg); } #threedtrans-3{ transform: rotateZ(180deg); } /* perspective: 800px; perspective-origin: 50% 100px; */

12 . 1

CSS3 ANIMATIONS - @KEYFRAMES@keyframes define what an animation looks like at eachstage.@keyframes are composed of three parts:

name - name of the animationstage – a percentage used to define the properties at thatstage. 0% (also can use from) and 100% (also can use to)have to be defined.properties – CSS properties

12 . 2

CSS3 ANIMATIONS - @KEYFRAMES@keyframes name { 0% {/*can use from */ top: 0; } 50% { top: 30px; } 100% {/* can use to*/ top: 0; } }

13 . 1

CSS3 ANIMATIONS - ANIMATION

13 . 2

CSS3 ANIMATIONS - ANIMATIONAnimation does two things:

Assign the @keyframes to the elements.Define how it is animated.

#div { animation-name: keyframe-name; animation-duration: 1s; animation-timing-function: ease; }

13 . 3

CSS3 ANIMATIONS - ANIMATIONPROPERTIES

Animation Properties:animation-name: name (Default: none)animation-duration: time of animation in seconds (Default:0s)animation-timing-function: timing function, remembercubic bezier curves (Default: ease)animation-delay: delay to start of animation (Default: 0s)

13 . 4

CSS3 ANIMATIONS - ANIMATIONPROPERTIES

Animation Properties:animation-iteration-count: times to run the animation(Default: 1)animation-direction: direction to play the animation,normal || reverse || alternate || alternate-reverse (Default:normal)animation-fill-mode: how should CSS apply styles, none ||forwards || backwards || both (Default: none)animation-play-state: animation running || paused (Default:running)

13 . 5

CSS3 ANIMATIONS - ANIMATIONPROPERTIES

Animation Shorthand Syntax:animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count];

13 . 6

CSS3 ANIMATION CODE SAMPLE

@keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } #css3animation{ animation-name: pulse, fadeOut; animation-duration: 1s, 5s; animation-delay: 0s, 5s; animation-iteration-count: infinite, infinite; animation-play-state: paused; }

13 . 7

BEAUTIFUL CSS ANIMATION EXAMPLESCSS 3D Solar SystemPure CSS3 AT-AT WalkerStretchy Cat

1415 . 1

BROWSERCOMPATIBILITY

15 . 2

15 . 3

15 . 4

15 . 5

15 . 6

HANDLING BROWSER PREFIXESSANELY – AUTOPREFIXER

plugin to parse CSS and add vendor prefixes to CSSrules using values from .Can add to Grunt and Gulp.

PostCSSCan I Use

15 . 7

@keyframes name { 0% { top: 0; } 50% { top: 30px; } 100% { top: 0; } }

15 . 7

15 . 8

BECOMES

15 . 9

@-webkit-keyframes name { 0% { top: 0; } 50% { top: 30px; } 100% { top: 0; } } @keyframes name { 0% { top: 0; } 50% { top: 30px; }

15 . 9

15 . 10

HANDLING BROWSER PREFIXESSANELY – BOURBON.IO

Simple mixins library for Sass. Using @include to outputprefixes.box:hover { @include animation(scale 1.0s ease-in, slide 2.0s ease); }

16 . 1

CSS3 ANIMATION LIBRARIESanimate.css is a bunch of cool, fun, and cross-browser

animations for you to use in your projects. Great for emphasis,home pages, sliders, and general just-add-water-awesomeness.

Demo

Magic.css is a bunch of CSS3 Animations with special effects.Demo

16 . 2

THE GEOCITIES-IZER

17 . 1

PRINCIPLES FORBEAUTIFUL ANIMATIONS

17 . 2

DISNEY ANIMATION: THE ILLUSION OF LIFE

Book by Ollie Johnston and Frank Thomas, two of the animationmasters at Disney's during the Golden Age of animation, referred

by Walt Disney as his "Nine Old Men".

17 . 3

PRINCIPLE 1: SQUASHAND STRETCH

Give a sense of weight and flexibility to drawn objects.

17 . 4

PRINCIPLE 2:ANTICIPATION

Prepare the audience for an action, and to make the actionappear more realistic. Ex. A dancer jumping off the floor has to

bend his knees first.

17 . 5

PRINCIPLE 3: STAGINGDirect the audience's attention and make it clear what is

important.

17 . 6

PRINCIPLE 4: STRAIGHTAHEAD ACTION AND

POSE TO POSE"Straight ahead action" means drawing out a scene frame byframe from beginning to end, while "pose to pose" involves

starting with drawing a few key frames, and then filling in theintervals later.

17 . 7

PRINCIPLE 5: FOLLOWTHROUGH AND

OVERLAPPING ACTIONGive the impression that characters follow the laws of physics,

including the principle of inertia.

17 . 8

PRINCIPLE 6: SLOW INAND SLOW OUT

Accelerate and Decelerate.

17 . 9

PRINCIPLE 7: FOLLOWARCS

17 . 10

PRINCIPLE 8:SECONDARY ACTION

17 . 11

PRINCIPLE 9: TIMING(AKA FRAMES/SECOND)

17 . 12

PRINCIPLE 10:EXAGGERATION

17 . 13

PRINCIPLE 11: SOLIDDRAWING

17 . 14

PRINCIPLE 12: APPEALAKA CHARISMA

17 . 15

PURE CSS FAIL WHALE

18 . 1

WHAT DID WE LEARN?History of Animation on the WebCSS3 Animations

TransitionsTransforms@keyframes & Animations

Browser CompatibilityAutoprefixerBourbon.io

CSS3 Animation LibrariesAnimate.css

18 . 2

THANK YOU!QUESTIONS?

ALSO, I WOULD LOVE TO SPEAK MOREIN EUROPE ;)

TW: | GH: @RAMISAYAR @SAYAR

SLIDESHARE.NET/RAMISAYAR

18 . 3

RESOURCES, REFERENCES, LINKShttp://dailyjs.com/2010/06/27/167-history-of-javascript/http://www.nytimes.com/2013/02/14/fashion/common-on-early-internet-gif-files-make-comeback.html?_r=1&https://hg.csswg.org/drafts/log/2579c1842a7c/css3-animations/Overview.src.htmlhttp://www.peterbe.com/plog/worst-flash-site-of-the-year-2010https://www.kirupa.com/html5/creating_simple_html5_canvas_animation.htmhttp://stackoverflow.com/questions/11182478/performance-css3-animations-vs-html5-canvas

18 . 4

RESOURCES, REFERENCES, LINKShttp://css3.bradshawenterprises.com/transitions/#delayshttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitionshttps://developer.mozilla.org/en-US/docs/Web/CSS/timing-functionhttps://robots.thoughtbot.com/css-animation-for-beginnershttps://www.smashingmagazine.com/2011/09/the-guide-to-css-animation-principles-and-examples/https://ihatetomatoes.net/the-guide-to-css-animations-for-the-web/http://www.creativebloq.com/css3/animation-with-css3-712437