Your SlideShare is downloading. ×
Creating CSS3 Animations with Sencha Animator
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Creating CSS3 Animations with Sencha Animator


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 …

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

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. CSS AnimationsWith Sencha Animator MICHAEL MULLANY, SENCHA
  • 2. Session Outline Why animations? Transforms & transitions Animations Browser support Sencha Animator Crazy CSS Hacks Roadmap Interface
  • 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. CSS TransformsTransforms transform the ENTIRE coordinate grid.- Nested transforms accumulate coordinate grid transformations Move 10px Scaling by 150% Adjusts EVERYTHING by 150%
  • 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. 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. 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
  • 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. Errata and Vendor Prefixes-moz and -webkit-webkit-box-shadow etc.No gradient transitionsFonts, line-height tweened atincrements of font value
  • 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. Sencha Animator
  • 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. Crazy CSS3 Hacks
  • 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. 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. 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. 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. Roadmap
  • 19. Check It