CSS 3Transitions and AnimationsGraceful degradation with jQuery
About me   • Andrea Verlicchi   • Gruppo Euris - Bologna   • Senior Front End     Developer & Team     Leader in Yoox Grou...
NEW IN CSS 3
NEW IN CSS 3   • New styles   • Transforms   • Transitions   • Animations
New styles • border-radius • box-shadow • text-shadow • rgba / hsla • gradients
Transforms • scale • rotate • skew • translate 2D • translate 3D
TransitionsChange between states gradually in time
AnimationsAutomatic transition through states (keyframes) defined in a time line
Any doctypeCSS 3 works on any version of x/html HTML 5, HTML 4, XHTML 1, etc.
BROWSERS
BROWSER SUPPORT10+         All   All   All         12+  IE 9: Basic            IE 8, 7, 6: No
Browser stats (Oct 2012)                       CHROME            INTERNET EXPLORER             FIREFOX   SAFARI   OPERA   ...
Browser versions (Oct 12)                  IE 9           IE 8    IE 7   IE 6
Mobile browsers (Oct 12)                            ANDROID                          IPHONE                         OPERA ...
Windows 8 + IE 10 Release
BROWSERS AREREADY FOR CSS 3
CSS 3TRANSITIONS     vs JAVASCRIPTANIMATIONS
Low effort
BETTER RESULTS     No queue      Users don’t have to wait                          GPU acceleration                       ...
Development time   (and maintenance)
IE 8 + 9 will be around for a while.Do we have to write twice the code       to do the same thing?
NO
Progressive enhancementDo you really want to / need to replicateEVERY effect you CAN create using CSS              transit...
Low redundancyIf you really need to replicate an effect,   the code redundancy is VERY LOW
HOW DO WE DO IT?
A transition is about animating the change    of value of one or more element        properties in a given time.
SO WE NEED TO...• Consider an element in the DOM• Define what element properties to    transition•   Define in how much time...
CONSIDER AN ELEMENT IN      THE DOM        Using a CSS selector.    I.g.: All the links in the page    a {}
DEFINE IN HOW MUCH TIME THE PROPERTIES CHANGE Using the “transition-duration” property       a {             transition-du...
DEFINE WHAT ELEMENTPROPERTIES TO TRANSITION Using the “transition-property” property       a {             transition-dura...
DEFINE A FINAL STATE FORTHE ELEMENT PROPERTIES     3 possible ways:     • Using an auto-applied       pseudo class     • U...
FINAL STATE WITH A   PSEUDO-CLASS    a:hover {        color: red;    }The link color will transition to red        on mous...
FINAL STATE WITH A CLASS       a.selected {           color: black;       }The link color will transition to black when   ...
FINAL STATE USING       JAVASCRIPT       $(‘a’).css(‘color’, ‘blue’);The link color will transition to blue when       thi...
DEMO
WHAT ABOUT OLD IE   VERSIONS?
GRACEFUL        DEGRADATION   DESIGN FOR MODERN BROWSERSbut make your site work perfectly for OLDER     VERSIONS that are ...
GRACEFUL     DEGRADATION     in TRANSITIONSIn which cases should we implement     a fallback, javascript based            ...
WE SHOULD NOT   When the transitions are merely for“coolness”, or they may negatively affect site    load time or runtime ...
WE SHOULD  When transitions are useful for the sitecomprehension, usability, to attract users, etc.
DETECTINGBROWSER FEATURES
USE MODERNIZR!• Go to http://modernizr.com/• Download development  version of Modernizr• Copy it in your site folder• Link...
WHAT MODERNIZR DOES:For each result:• It creates a boolean property of a global   object called Modernizr• It adds a css c...
WHAT MODERNIZR DOES:Example:• Modernizr.csstransitions (true/false)• <html class=“csstransitions”>  note: the negative res...
WHAT YOU CAN DO:• JS: Create alternative lines of Javascript code  to manage CSS transitions / Javascript  transitions• CS...
EXAMPLE OF JS FALLBACKvar newLeft = SOME_VALUE;// Set the new left if browser can handle css transitions// else animate it...
EXAMPLE OF CSS FALLBACK #someBox {     background-color: rgba(255, 255, 255, 0.5); } html.no-rgba #someBox {     backgroun...
DEMO
WHAT ABOUTANIMATIONS?
WHAT ARE ANIMATIONS Animations allow us to define states in time  (keyframes) and transition through them
CSS ANIMATIONS• Name an animation• Define a set of keyframes• Define the CSS properties for each frame• Apply the animation ...
DECLARATIONDefining the animation “bounceThenFly”@keyframes   bounceThenFly {    0%       { background-position:   -13px 42...
DECLARATION    (each keyframe can be more complex)@keyframes anotherAnimation {      // ...      50% {          background...
USAGEThe #rocket element will use the animation“bounceThenFly” during a time of 5 seconds,         and repeat it infinitely...
USAGELess characters = happier coders & lighter CSS      #rocket {        animation: bounceThenFly 5s infinite;      }
USAGELess characters = happier coders & lighter CSS        #rocket {          animation: bounceThenFly 5s infinite;       ...
DEMO
INTO THE WILD
VENDOR PREFIXESFor the CSS rules that are still to be defined as a   standard, we need to use vendor-prefixes
VENDOR PREFIXESFor the CSS rules that are still to be defined as a   standard, we need to use vendor-prefixes-webkit-       ...
VENDOR PREFIXESFor the CSS rules that are still to be defined as a   standard, we need to use vendor-prefixes            -we...
VENDOR PREFIXESFor the CSS rules that are still to be defined as a   standard, we need to use vendor-prefixes               ...
Option A Manually duplicate the code From:transition: color 500ms ease-in-out;                      To:-webkit-transition:...
Option BUse a script to do it automatically      Client-side: PrefixFree  http://leaverou.github.com/prefixfree/       Serve...
RESUME
TRANSITIONS• FOR LITTLE GRAPHIC TRANSITIONS  without detect and fallback• FOR RELEVANT GRAPHIC TRANSITIONS  with Javascrip...
ANIMATIONS• TO CREATE ANIMATED ELEMENTS IN SITES  i.g. banners, call-to-action buttons, logos,  graphical background eleme...
• They make a more pleasant user experience for users with modern browsers• They are optimized for mobile devices
@verlokwww.andreaverlicchi.eu
Upcoming SlideShare
Loading in …5
×

Css3 transitions and animations + graceful degradation with jQuery

6,511 views
6,346 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,511
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
32
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Css3 transitions and animations + graceful degradation with jQuery

  1. 1. CSS 3Transitions and AnimationsGraceful degradation with jQuery
  2. 2. About me • Andrea Verlicchi • Gruppo Euris - Bologna • Senior Front End Developer & Team Leader in Yoox Group • www.andreaverlicchi.eu verlok
  3. 3. NEW IN CSS 3
  4. 4. NEW IN CSS 3 • New styles • Transforms • Transitions • Animations
  5. 5. New styles • border-radius • box-shadow • text-shadow • rgba / hsla • gradients
  6. 6. Transforms • scale • rotate • skew • translate 2D • translate 3D
  7. 7. TransitionsChange between states gradually in time
  8. 8. AnimationsAutomatic transition through states (keyframes) defined in a time line
  9. 9. Any doctypeCSS 3 works on any version of x/html HTML 5, HTML 4, XHTML 1, etc.
  10. 10. BROWSERS
  11. 11. BROWSER SUPPORT10+ All All All 12+ IE 9: Basic IE 8, 7, 6: No
  12. 12. Browser stats (Oct 2012) CHROME INTERNET EXPLORER FIREFOX SAFARI OPERA OTHER
  13. 13. Browser versions (Oct 12) IE 9 IE 8 IE 7 IE 6
  14. 14. Mobile browsers (Oct 12) ANDROID IPHONE OPERA NOKIA UC BROWSER NETFRONT BLACKBERRY IPOD + DOLFIN SAFARI
  15. 15. Windows 8 + IE 10 Release
  16. 16. BROWSERS AREREADY FOR CSS 3
  17. 17. CSS 3TRANSITIONS vs JAVASCRIPTANIMATIONS
  18. 18. Low effort
  19. 19. BETTER RESULTS No queue Users don’t have to wait GPU acceleration Best performance Expecially on mobile devicesConsistent layoutCSS-driven final state Browser-triggered animations Zoom, MQ switch Asynchronous They run on a separate thread
  20. 20. Development time (and maintenance)
  21. 21. IE 8 + 9 will be around for a while.Do we have to write twice the code to do the same thing?
  22. 22. NO
  23. 23. Progressive enhancementDo you really want to / need to replicateEVERY effect you CAN create using CSS transitions?
  24. 24. Low redundancyIf you really need to replicate an effect, the code redundancy is VERY LOW
  25. 25. HOW DO WE DO IT?
  26. 26. A transition is about animating the change of value of one or more element properties in a given time.
  27. 27. SO WE NEED TO...• Consider an element in the DOM• Define what element properties to transition• Define in how much time the properties will change• Define a final state for the element properties
  28. 28. CONSIDER AN ELEMENT IN THE DOM Using a CSS selector. I.g.: All the links in the page a {}
  29. 29. DEFINE IN HOW MUCH TIME THE PROPERTIES CHANGE Using the “transition-duration” property a { transition-duration: 1s; }
  30. 30. DEFINE WHAT ELEMENTPROPERTIES TO TRANSITION Using the “transition-property” property a { transition-duration: 1s; transition-property: color; }
  31. 31. DEFINE A FINAL STATE FORTHE ELEMENT PROPERTIES 3 possible ways: • Using an auto-applied pseudo class • Using a class • Using Javascript
  32. 32. FINAL STATE WITH A PSEUDO-CLASS a:hover { color: red; }The link color will transition to red on mouseover state
  33. 33. FINAL STATE WITH A CLASS a.selected { color: black; }The link color will transition to black when the selected class is applied to it
  34. 34. FINAL STATE USING JAVASCRIPT $(‘a’).css(‘color’, ‘blue’);The link color will transition to blue when this line of code is executed
  35. 35. DEMO
  36. 36. WHAT ABOUT OLD IE VERSIONS?
  37. 37. GRACEFUL DEGRADATION DESIGN FOR MODERN BROWSERSbut make your site work perfectly for OLDER VERSIONS that are still out there (maybe with less effects)
  38. 38. GRACEFUL DEGRADATION in TRANSITIONSIn which cases should we implement a fallback, javascript based transition?
  39. 39. WE SHOULD NOT When the transitions are merely for“coolness”, or they may negatively affect site load time or runtime performance
  40. 40. WE SHOULD When transitions are useful for the sitecomprehension, usability, to attract users, etc.
  41. 41. DETECTINGBROWSER FEATURES
  42. 42. USE MODERNIZR!• Go to http://modernizr.com/• Download development version of Modernizr• Copy it in your site folder• Link it in your site header
  43. 43. WHAT MODERNIZR DOES:For each result:• It creates a boolean property of a global object called Modernizr• It adds a css class to the html element of the page
  44. 44. WHAT MODERNIZR DOES:Example:• Modernizr.csstransitions (true/false)• <html class=“csstransitions”> note: the negative result no-csstransitions
  45. 45. WHAT YOU CAN DO:• JS: Create alternative lines of Javascript code to manage CSS transitions / Javascript transitions• CSS: Manage exceptions depending on the browser support to CSS transitions
  46. 46. EXAMPLE OF JS FALLBACKvar newLeft = SOME_VALUE;// Set the new left if browser can handle css transitions// else animate it the left propertyif (Modernizr.csstransitions) { this.bannerContainer.css({ left: newLeft });} else { this.bannerContainer.animate({ left: newLeft }, 750);}
  47. 47. EXAMPLE OF CSS FALLBACK #someBox { background-color: rgba(255, 255, 255, 0.5); } html.no-rgba #someBox { background-image: url(‘../img/white_50_percent.png’); }
  48. 48. DEMO
  49. 49. WHAT ABOUTANIMATIONS?
  50. 50. WHAT ARE ANIMATIONS Animations allow us to define states in time (keyframes) and transition through them
  51. 51. CSS ANIMATIONS• Name an animation• Define a set of keyframes• Define the CSS properties for each frame• Apply the animation in time= Automatic transition bewteen keyframes
  52. 52. DECLARATIONDefining the animation “bounceThenFly”@keyframes bounceThenFly { 0% { background-position: -13px 42px } 10% { background-position: -7px 30px } 20% { background-position: -13px 42px } 30% { background-position: -7px 30px } 40% { background-position: -13px 42px } 50% { background-position: 40px -60px } 50.01% { background-position: -35px 120px } 98% { background-position: -13px 42px }}
  53. 53. DECLARATION (each keyframe can be more complex)@keyframes anotherAnimation { // ... 50% { background-color: red; color: white; text-shadow: 0 0 10px black; } // ...}
  54. 54. USAGEThe #rocket element will use the animation“bounceThenFly” during a time of 5 seconds, and repeat it infinitely #rocket { animation-name: bounceThenFly; animation-duration: 5s; animation-iteration-count: infinite; }
  55. 55. USAGELess characters = happier coders & lighter CSS #rocket { animation: bounceThenFly 5s infinite; }
  56. 56. USAGELess characters = happier coders & lighter CSS #rocket { animation: bounceThenFly 5s infinite; } animation-name animation-duration animation-iteration-count
  57. 57. DEMO
  58. 58. INTO THE WILD
  59. 59. VENDOR PREFIXESFor the CSS rules that are still to be defined as a standard, we need to use vendor-prefixes
  60. 60. VENDOR PREFIXESFor the CSS rules that are still to be defined as a standard, we need to use vendor-prefixes-webkit- -moz- -ms- -o- MARCH 2012
  61. 61. VENDOR PREFIXESFor the CSS rules that are still to be defined as a standard, we need to use vendor-prefixes -webkit- -o- OCTOBER 2012
  62. 62. VENDOR PREFIXESFor the CSS rules that are still to be defined as a standard, we need to use vendor-prefixes -webkit- ____ 2013 ?
  63. 63. Option A Manually duplicate the code From:transition: color 500ms ease-in-out; To:-webkit-transition: color 500ms ease-in-out;-o-transition: color 500ms ease-in-out;transition: color 500ms ease-in-out;
  64. 64. Option BUse a script to do it automatically Client-side: PrefixFree http://leaverou.github.com/prefixfree/ Server-side: Prefixer http://cssprefixer.appspot.com/
  65. 65. RESUME
  66. 66. TRANSITIONS• FOR LITTLE GRAPHIC TRANSITIONS without detect and fallback• FOR RELEVANT GRAPHIC TRANSITIONS with Javascript detect and fallback• FOR EVERY TRANSITION on MOBILE no real need of detect and fallback
  67. 67. ANIMATIONS• TO CREATE ANIMATED ELEMENTS IN SITES i.g. banners, call-to-action buttons, logos, graphical background elements• SEE: http://2012.fromthefront.it
  68. 68. • They make a more pleasant user experience for users with modern browsers• They are optimized for mobile devices
  69. 69. @verlokwww.andreaverlicchi.eu

×