Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

CSS Transitions, Transforms, Animations

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

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

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>

×