CSS Transitions, Transforms, Animations
•Download as PPTX, PDF•
5 likes•7,020 views
Feb 23rd presentation at the <!DOCTYPE html> meetup at @hugeinc. http://www.meetup.com/doctype-html/
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to CSS Transitions, Transforms, Animations
Similar to CSS Transitions, Transforms, Animations (20)
Recently uploaded
Recently uploaded (20)
CSS Transitions, Transforms, Animations
- 1. CSS Transitions, Transforms & Animations Tuesday February 23, 2011
- 2. transitions
- 3. Ch-ch-ch-ch-changes Class .a arrow === css3 transition == ZOMG Class .b
- 4. What (are CSS3 transitions)? Sometimes we change CSS properties dynamically by changing or adding a class. e.g. $(‘input’).addClass(‘error’); CSS3 Transitions allow us to animate the change in these CSS properties… easily!
- 5. Transitions defined & browser support -browser-transition: {property} {duration} {easing} {delay}; easing defaults: linear, ease-in, ease-out, ease-in-out -webkit-transition: (Safari 3.1+, Chrome since forever) -moz-transition: (FF 4+) -o-transition: (Opera 10.doYouCare) -msie-transition: (apparently NOT ie9 )
- 6. animations
- 7. from { left: 100px; width: 100px; height: 100px; animation-timing: ease-in; } to { left: 200px; width: 50px; height: 50px; } keyframes but what’s going on in the middle? changing multiple styles at different times over an interval 7
- 8. keyframes (cont.) from { ... } to { transform: rotate(180deg); left: 200px; } 60% { left: 100px; } 30% { left: 200px; width: 50px; height: 50px; } 8
- 10. typeArg (string)
- 15. animationEnd
- 18. GPU vs. CPU hardware acceleration It’s the difference between... GPU’s are very good BitBLIT Operations 11
- 19. Animation Builders developers don’t want to code animations Banner Ads Purely Native Web Apps Native-Like Interfaces Immersive Sites (Sencha Animator) into the mainstream 12
- 21. 404 Page
- 22. Solar System
- 23. Portfolio13
- 24. transforms
- 25. transform: rotate(x) rotate(45deg) rotate(180deg) rotate(0deg)
- 26. transform: scale(x) scale(2) scale(1)
- 27. transform: translate(x, y) translate(0,0) translate(200px, 100px)
- 28. transform: skew(x, y) skewX(25deg) skewY(25deg) skew(0deg, 0deg)
- 29. transform: skew(x, y) 25° 25° skewX(25deg) skewY(25deg) skew(0deg, 0deg)
- 30. transform: skew(x, y) skew(25deg, 25deg) skew(0deg, 0deg)
- 31. transform: matrix(a,b,c,d,e,f) ???
- 32. transform: matrix(a,b,c,d,e,f) a ce bdf 0 0 1 = matrix(a,b,c,d,e,f) 3x3 matrix
- 33. transform: matrix(a,b,c,d,e,f) 1 0 0 0 1 0 0 0 1 = matrix(1,0,0,1,0,0) 3x3 matrix
- 34. transform: matrix(a,b,c,d,e,f) 2 0 0 0 2 0 0 0 1 = matrix(2,0,0,2,0,0) 3x3 matrix
- 35. transform: matrix(a,b,c,d,e,f) = matrix(2,0,0,2,0,0) scale(2)
- 36. transform: matrix(a,b,c,d,e,f) 1 0 tx 0 1 ty 0 0 1 sx 0 0 0 sy 0 0 0 1 scale translate 1 tan(a) 0 tan(a) 1 0 0 0 1 cos(a)-sin(a) 0 sin(a) cos(a) 0 0 0 1 rotate skew
- 37. transform: matrix(a,b,c,d,e,f) -1 0 0 0 1 0 0 0 1 1 0 0 0 -1 0 0 0 1 -1 0 0 0 -1 0 0 0 1 flip horizontal flip vertical flip both
- 38. transform-origin: x, y transform-origin: 50% 50% transform-origin: top left
- 39. Browser Support -moz-transform: rotate(45deg); // FF3.5+ -webkit-transform: rotate(45deg); // Saf3.1+, Chrome -o-transform: rotate(45deg); // Opera 10.5 -ms-transform: rotate(45deg); // IE9 transform: rotate(45deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.7071067811865476, M12=-0.7071067811865476, M21=0.7071067811865476, M22=0.7071067811865476, sizingMethod='auto expand'); // IE6 – IE9
- 41. What’s under the hood? 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 4x4 matrix
- 43. translate3d
- 44. skew3d
- 45. scale3d
- 47. transform-style
- 48. perspective
- 51. Morphing Cube (safari only)
- 52. Photo Cube (safari only)
- 53. Bezier Builder (webkit only)