CSS Transitions, Transforms, Animations

5,552
-1

Published on

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

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

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

No Downloads
Views
Total Views
5,552
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
127
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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>

×