CSS AnimationsWith Sencha Animator MICHAEL MULLANY, SENCHA
Session Outline     Why animations? Transforms & transitions       Animations     Browser support     Sencha Animator     ...
Animation Building BlocksTransforms: 2D and 3DMove (Relative)Scale, Rotate, Skew, Opacity   Only animationSpecify a transf...
CSS TransformsTransforms transform the ENTIRE coordinate grid.- Nested transforms accumulate coordinate grid transformatio...
Transform Origin                    PERCENT OR PIXELS  100%        0%    50%, 50% is implied default    100%  100%      0%...
CSS Transition Propertiesbackground-color      left             topbackground-image      letter-spacing   vertical-align(g...
CSS AnimationsOnly e ect properties duringexecution of the animation- keyframe duration (secs,%)- easing curve- delay- pau...
Easing Curves                Built-In Functions                - Ease (default)                - Ease-in/Ease-out         ...
Errata and Vendor Prefixes-moz and -webkit-webkit-box-shadow etc.No gradient transitionsFonts, line-height tweened atincrem...
Chrome vs. SafariChrome interpolates missing        Safari uses intrinsic valuesframe values                       (correc...
Sencha Animator
Animator Productivity TipsNEST NEST NEST NEST- Wrapper divs are a huge productivity boostWatch your transform origins- Los...
Crazy CSS3 Hacks
Gradients, Clipping & Masks2 radial gradients: multiple color stops   radial gradient: multiple color stops    background-...
CSS Hack for Shape BlursFind a character that looks like theshape you needSet fill to opaqueSet shadow with 0,0 o set and a...
What You Can’t Do...Direct Motion PathsCombine wrapper divs and custom easing functions to get thereHuge need for a pathin...
3D Transforms-webkit-preserve-3DWithout this, child divs areflattened into the plane of theirparent div-webkit-perspectiveA...
Roadmap
Check It Outwww.sencha.com/products/animator
Creating CSS3 Animations with Sencha Animator
Creating CSS3 Animations with Sencha Animator
Creating CSS3 Animations with Sencha Animator
Upcoming SlideShare
Loading in …5
×

Creating CSS3 Animations with Sencha Animator

10,214 views

Published on

CSS3 animations are a new tool in the armory of web developers and designers. In this session, we'll walk you through the building blocks of a CSS3 animation and show you how to create them with Sencha Animator, our new CSS3 Animation builder. We'll also talk about the limitations of today's CSS3 animations, and how to leverage some of the more obscure CSS3 properties to get around them.

Published in: Technology, Art & Photos

Creating CSS3 Animations with Sencha Animator

  1. 1. CSS AnimationsWith Sencha Animator MICHAEL MULLANY, SENCHA
  2. 2. Session Outline Why animations? Transforms & transitions Animations Browser support Sencha Animator Crazy CSS Hacks Roadmap Interface
  3. 3. Animation Building BlocksTransforms: 2D and 3DMove (Relative)Scale, Rotate, Skew, Opacity Only animationSpecify a transform origin technology that worksTransitions on Android, iOS, RIM,Tweening between statesEasing curve MeegoDiscrete state changesElements GPU ACCELERATED!Block + In-Line Elements
  4. 4. CSS TransformsTransforms transform the ENTIRE coordinate grid.- Nested transforms accumulate coordinate grid transformations Move 10px Scaling by 150% Adjusts EVERYTHING by 150%
  5. 5. Transform Origin PERCENT OR PIXELS 100% 0% 50%, 50% is implied default 100% 100% 0% 100% 100% 100% 100% 0% 100% 0% 0%0% 0% 0%
  6. 6. CSS Transition Propertiesbackground-color left topbackground-image letter-spacing vertical-align(gradients) line-height visibilitybackground-position margin-bottom widthborder-bottom-color margin-left word-spacingborder-bottom-width margin-right z-indexborder-color margin-top zoomborder-left-color max-heightborder-left-width max-width stop-colorborder-right-color min-height stop-opacityborder-right-width min-width fillborder-spacing opacity fill-opacityborder-top-color outline-color strokeborder-top-width outline-offset stroke-dasharrayborder-width outline-width stroke-dashoffsetbottom padding-bottom stroke-miterlimitcolor padding-leftcrop padding-rightfont-size padding-topfont-weight rightgrid-* text-indentheight text-shadow
  7. 7. CSS AnimationsOnly e ect properties duringexecution of the animation- keyframe duration (secs,%)- easing curve- delay- pause/restart- fill-mode (property over-ride)- iterations- forward/back http://dev.w3.org/csswg/css3-animations/
  8. 8. Easing Curves Built-In Functions - Ease (default) - Ease-in/Ease-out - Ease-in - Ease-out Custom bezier - custom-bezier (p1x,p1y, p2x, p2y)
  9. 9. Errata and Vendor Prefixes-moz and -webkit-webkit-box-shadow etc.No gradient transitionsFonts, line-height tweened atincrements of font value
  10. 10. Chrome vs. SafariChrome interpolates missing Safari uses intrinsic valuesframe values (correct)Chrome applies a transition when Safari applies only the lasttwo transforms are applied to an transform (correct)objectChrome drops anti-aliasing, and Safari & mobile Safari often retainlacks GPU acceleration for 3D anti-aliasing & have GPU acceleration
  11. 11. Sencha Animator
  12. 12. Animator Productivity TipsNEST NEST NEST NEST- Wrapper divs are a huge productivity boostWatch your transform origins- Losing track of them can cause much painWatch base object vs. keyframe animations- keyframes over-ride base object- ....until you disable keyframe values !Overflow:hidden can work as a poor-man’s maskScale text to maximum size that you need
  13. 13. Crazy CSS3 Hacks
  14. 14. Gradients, Clipping & Masks2 radial gradients: multiple color stops radial gradient: multiple color stops background-clip: text slight background gradient box-reflect on underlay DIV
  15. 15. CSS Hack for Shape BlursFind a character that looks like theshape you needSet fill to opaqueSet shadow with 0,0 o set and anappropriate color and blurScale, rotate & skew to get desiredresultsFind a web font with a shape youneed!
  16. 16. What You Can’t Do...Direct Motion PathsCombine wrapper divs and custom easing functions to get thereHuge need for a pathing toolAdvanced Text ManipulationText on a curve/pathSub-pixel kerningHand-animated text is possible but very time-consumingSub-Element Animationse.g “typewriter”-style animations are very time consumingFilters (on the CSS wish-list since 1998!) - would enable blurs etc.
  17. 17. 3D Transforms-webkit-preserve-3DWithout this, child divs areflattened into the plane of theirparent div-webkit-perspectiveAutomatically applies aperspectiveUsed poorly = crazy foreshorteningPoor desktop performanceQuite smooth on iPhone 4/iPad
  18. 18. Roadmap
  19. 19. Check It Outwww.sencha.com/products/animator

×