creating beautiful css3 animations - fitc amsterdam 2016
TRANSCRIPT
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
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 . 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 . 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
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 . 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);
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
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
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