CSS Transitions, Transforms, Animations
Download as PPTX, PDF5 likes7,409 views
The document discusses CSS3 transitions, transforms, and animations, explaining how they allow for smooth changes in CSS properties. It details various properties related to transitions and animations, browser support, and provides examples of CSS transformations. Additionally, it touches on hardware acceleration and animation builders for developers seeking to create visually engaging web applications.
CSS Transitions, Transforms, Animations
- 1. CSS Transitions, Transforms & AnimationsTuesday February 23, 2011
- 2. transitions
- 3. Ch-ch-ch-ch-changesClass .aarrow === css3 transition == ZOMGClass .b
- 4. What (are CSS3 transitions)?Sometimes we change CSS properties dynamically bychanging 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;}keyframesbut what’s going on in the middle?changing multiple styles at different times over an interval7
- 8. keyframes (cont.)from {...}to {transform: rotate(180deg);left: 200px;}60% {left: 100px;}30% {left: 200px;width: 50px;height: 50px;}8
- 9. using animations programmatically InitializerinitAnimationEvent - Initializes an animation event given a DOMobject
- 10. typeArg (string)
- 15. animationEnd
- 17. optionsanimation-delay: 5s;delay to startanimation-direction: alternate; animation is played in reverse on odd iterationsanimation-durations: 5s;time to complete animationanimation-iteration-count: 5;times to play animation (doubled for alternate)animation-name: myAnimation;unique ID for animationanimation-play-state: paused;pauses/plays the animationanimation-timing-function: cubic-bezier(x1,y1,x2,y2)a custom/predefined timing curve to follow10
- 18. GPU vs. CPUhardware accelerationIt’s the difference between...GPU’s are very good BitBLIT Operations11
- 19. Animation Buildersdevelopers don’t want to code animationsBanner AdsPurely Native Web AppsNative-Like InterfacesImmersive Sites(Sencha Animator)into the mainstream12
- 20. examplesOSX Dock
- 21. 404 Page
- 22. Solar System
- 23. Portfolio13
- 24. transforms
- 30. transform: skew(x, y)skew(25deg, 25deg)skew(0deg, 0deg)
- 32. transform: matrix(a,b,c,d,e,f)a cebdf0 0 1=matrix(a,b,c,d,e,f)3x3 matrix
- 33. transform: matrix(a,b,c,d,e,f)1 0 00 1 00 0 1=matrix(1,0,0,1,0,0)3x3 matrix
- 34. transform: matrix(a,b,c,d,e,f)2 0 00 2 00 0 1=matrix(2,0,0,2,0,0)3x3 matrix
- 36. transform: matrix(a,b,c,d,e,f)1 0 tx0 1 ty0 0 1sx 0 00 sy 00 0 1scaletranslate1 tan(a) 0tan(a) 1 00 0 1cos(a)-sin(a) 0sin(a) cos(a) 00 0 1rotateskew
- 37. transform: matrix(a,b,c,d,e,f)-1 0 00 1 00 0 11 0 00 -1 00 0 1-1 0 00 -1 00 0 1flip horizontalflip verticalflip both
- 38. transform-origin: x, ytransform-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); // IE9transform: 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 00 1 0 00 0 1 00 0 0 14x4 matrix
- 43. translate3d
- 44. skew3d
- 45. scale3d
- 46. matrix3dOther properties transform-origin
- 47. transform-style
- 48. perspective
- 51. Morphing Cube (safari only)
- 52. Photo Cube (safari only)
- 53. Bezier Builder (webkit only)