CSS Transitions, Transforms, Animations
•Als PPTX, PDF herunterladen•
5 gefällt mir•7,084 views
Feb 23rd presentation at the <!DOCTYPE html> meetup at @hugeinc. http://www.meetup.com/doctype-html/
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie CSS Transitions, Transforms, Animations
Ähnlich wie CSS Transitions, Transforms, Animations (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (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)