Downloaded 247 times
Uploaded byRob LaPlaca
CSS Transitions, Transforms, Animations
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.
In this document
Powered by AI
Introduction to CSS3 transitions, changing CSS properties dynamically with class addition.
Animations using keyframes, control over timing, delay, direction, and iteration count.
Comparative advantage of GPU over CPU for hardware acceleration; usage in ads and apps.
Different CSS transforms: rotate, scale, translate, skew; introduction to 3D transformations and their properties.
More Related Content
Similar to CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
- 1. CSS Transitions, Transforms& AnimationsTuesday February 23, 2011
- 2.
- 3. Ch-ch-ch-ch-changesClass .aarrow ===css3 transition == ZOMGClass .b
- 4. What (are CSS3transitions)?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.
- 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 programmaticallyInitializerinitAnimationEvent - Initializes an animation event given a DOMobject
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17. optionsanimation-delay: 5s;delay tostartanimation-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. CPUhardwareaccelerationIt’s the difference between...GPU’s are very good BitBLIT Operations11
- 19. Animation Buildersdevelopers don’twant to code animationsBanner AdsPurely Native Web AppsNative-Like InterfacesImmersive Sites(Sencha Animator)into the mainstream12
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30. transform: skew(x, y)skew(25deg,25deg)skew(0deg, 0deg)
- 31.
- 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
- 35.
- 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
- 40.
- 41. What’s under thehood?1 0 0 00 1 0 00 0 1 00 0 0 14x4 matrix
- 42.
- 43.
- 44.
- 45.
- 46. matrix3dOther propertiestransform-origin
- 47.
- 48.
- 49.
- 50.
- 51.
- 52. Photo Cube (safarionly)
- 53.