Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS Transitions, Transforms, Animations

7,147 views

Published on

Feb 23rd presentation at the <!DOCTYPE html> meetup at @hugeinc.

http://www.meetup.com/doctype-html/

Published in: Technology

CSS Transitions, Transforms, Animations

  1. 1. CSS Transitions, Transforms & Animations<br />Tuesday February 23, 2011 <br />
  2. 2. transitions<br />
  3. 3. Ch-ch-ch-ch-changes<br />Class .a<br />arrow === css3 transition == ZOMG<br />Class .b<br />
  4. 4. What (are CSS3 transitions)?<br />Sometimes we change CSS properties dynamically by<br />changing or adding a class.<br />e.g. $(‘input’).addClass(‘error’);<br />CSS3 Transitions allow us to animate the change in <br />these CSS properties… easily!<br />
  5. 5. Transitions defined & browser support<br />-browser-transition: {property} {duration} {easing} {delay};<br />easing defaults: linear, ease-in, ease-out, ease-in-out<br />-webkit-transition: (Safari 3.1+, Chrome since forever)<br />-moz-transition: (FF 4+)<br />-o-transition: (Opera 10.doYouCare) <br />-msie-transition: (apparently NOT ie9 )<br />
  6. 6. animations<br />
  7. 7. from {<br />left: 100px;<br />width: 100px;<br />height: 100px;<br />animation-timing: ease-in;<br />}<br />to {<br />left: 200px;<br />width: 50px;<br />height: 50px;<br />}<br />keyframes<br />but what’s going on in the middle?<br />changing multiple styles at different times over an interval<br />7<br />
  8. 8. keyframes (cont.)<br />from {<br />...<br />}<br />to {<br />transform: rotate(180deg);<br />left: 200px;<br />}<br />60% {<br />left: 100px;<br />}<br />30% {<br />left: 200px;<br />width: 50px;<br />height: 50px;<br />}<br />8<br />
  9. 9. using animations programmatically <br />Initializer<br /><ul><li>initAnimationEvent - Initializes an animation event given a DOMobject
  10. 10. typeArg (string)
  11. 11. canBubbleArg (boolean)
  12. 12. cancelableArg (boolean)
  13. 13. animationNameArg (string)
  14. 14. elapsedTimeArg (float)</li></ul>Callbacks<br /><ul><li>animationStart
  15. 15. animationEnd
  16. 16. animationIteration</li></ul>9<br />
  17. 17. options<br />animation-delay: 5s;<br /><ul><li>delay to start</li></ul>animation-direction: alternate; <br /><ul><li>animation is played in reverse on odd iterations</li></ul>animation-durations: 5s;<br /><ul><li>time to complete animation</li></ul>animation-iteration-count: 5;<br /><ul><li>times to play animation (doubled for alternate)</li></ul>animation-name: myAnimation;<br /><ul><li>unique ID for animation</li></ul>animation-play-state: paused;<br /><ul><li>pauses/plays the animation</li></ul>animation-timing-function: cubic-bezier(x1,y1,x2,y2)<br /><ul><li>a custom/predefined timing curve to follow</li></ul>10<br />
  18. 18. GPU vs. CPU<br />hardware acceleration<br />It’s the difference between...<br />GPU’s are very good BitBLIT Operations<br />11<br />
  19. 19. Animation Builders<br />developers don’t want to code animations<br />Banner Ads<br />Purely Native Web Apps<br />Native-Like Interfaces<br />Immersive Sites<br />(Sencha Animator)<br />into the mainstream<br />12<br />
  20. 20. examples<br /><ul><li>OSX Dock
  21. 21. 404 Page
  22. 22. Solar System
  23. 23. Portfolio</li></ul>13<br />
  24. 24. transforms<br />
  25. 25. transform: rotate(x)<br /><br /><br /><br />rotate(45deg)<br />rotate(180deg)<br />rotate(0deg)<br />
  26. 26. transform: scale(x)<br /><br /><br />scale(2)<br />scale(1)<br />
  27. 27. transform: translate(x, y)<br /><br /><br />translate(0,0)<br />translate(200px, 100px)<br />
  28. 28. transform: skew(x, y)<br /><br />skewX(25deg)<br />skewY(25deg)<br />skew(0deg, 0deg)<br />
  29. 29. transform: skew(x, y)<br />25°<br /><br />25°<br />skewX(25deg)<br />skewY(25deg)<br />skew(0deg, 0deg)<br />
  30. 30. transform: skew(x, y)<br /><br />skew(25deg, 25deg)<br />skew(0deg, 0deg)<br />
  31. 31. transform: matrix(a,b,c,d,e,f)<br /><br />???<br />
  32. 32. transform: matrix(a,b,c,d,e,f)<br />a ce<br />bdf<br />0 0 1<br />=<br />matrix(a,b,c,d,e,f)<br />3x3 matrix<br />
  33. 33. transform: matrix(a,b,c,d,e,f)<br />1 0 0<br />0 1 0<br />0 0 1<br />=<br />matrix(1,0,0,1,0,0)<br />3x3 matrix<br />
  34. 34. transform: matrix(a,b,c,d,e,f)<br />2 0 0<br />0 2 0<br />0 0 1<br />=<br />matrix(2,0,0,2,0,0)<br />3x3 matrix<br />
  35. 35. transform: matrix(a,b,c,d,e,f)<br />=<br />matrix(2,0,0,2,0,0)<br />scale(2)<br />
  36. 36. transform: matrix(a,b,c,d,e,f)<br />1 0 tx<br />0 1 ty<br />0 0 1<br />sx 0 0<br />0 sy 0<br />0 0 1<br />scale<br />translate<br />1 tan(a) 0<br />tan(a) 1 0<br />0 0 1<br />cos(a)-sin(a) 0<br />sin(a) cos(a) 0<br />0 0 1<br />rotate<br />skew<br />
  37. 37. transform: matrix(a,b,c,d,e,f)<br />-1 0 0<br />0 1 0<br />0 0 1<br />1 0 0<br />0 -1 0<br />0 0 1<br />-1 0 0<br />0 -1 0<br />0 0 1<br />flip horizontal<br />flip vertical<br />flip both<br />
  38. 38. transform-origin: x, y<br />transform-origin: 50% 50%<br />transform-origin: top left<br />
  39. 39. Browser Support<br />-moz-transform: rotate(45deg); // FF3.5+<br />-webkit-transform: rotate(45deg); // Saf3.1+, Chrome<br />-o-transform: rotate(45deg); // Opera 10.5<br />-ms-transform: rotate(45deg); // IE9<br />transform: rotate(45deg); <br />filter: progid:DXImageTransform.Microsoft.Matrix(<br /> M11=0.7071067811865476, <br /> M12=-0.7071067811865476,<br /> M21=0.7071067811865476, <br /> M22=0.7071067811865476, <br />sizingMethod='auto expand'); // IE6 – IE9<br />
  40. 40. 3D Transformations<br />
  41. 41. What’s under the hood?<br />1 0 0 0<br />0 1 0 0<br />0 0 1 0<br />0 0 0 1<br />4x4 matrix<br />
  42. 42. 3D functions<br /><ul><li> rotate3d
  43. 43. translate3d
  44. 44. skew3d
  45. 45. scale3d
  46. 46. matrix3d</li></li></ul><li>Other properties<br /><ul><li> transform-origin
  47. 47. transform-style
  48. 48. perspective
  49. 49. perspective-origin
  50. 50. backface-visibility</li></li></ul><li>Examples<br /><ul><li>Snow Stack (safari only)
  51. 51. Morphing Cube (safari only)
  52. 52. Photo Cube (safari only)
  53. 53. Bezier Builder (webkit only)</li>

×