creating css3 animations with sencha animator
DESCRIPTION
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.TRANSCRIPT
![Page 1: Creating CSS3 Animations with Sencha Animator](https://reader034.vdocuments.net/reader034/viewer/2022051323/549eaf45ac79591f768b47dd/html5/thumbnails/1.jpg)
![Page 2: Creating CSS3 Animations with Sencha Animator](https://reader034.vdocuments.net/reader034/viewer/2022051323/549eaf45ac79591f768b47dd/html5/thumbnails/2.jpg)
CSS AnimationsWith Sencha Animator
MICHAEL MULLANY, SENCHA
![Page 3: Creating CSS3 Animations with Sencha Animator](https://reader034.vdocuments.net/reader034/viewer/2022051323/549eaf45ac79591f768b47dd/html5/thumbnails/3.jpg)
Session OutlineWhy animations?
Transforms & transitionsAnimations
Browser supportSencha AnimatorCrazy CSS Hacks
Roadmap Interface
![Page 4: Creating CSS3 Animations with Sencha Animator](https://reader034.vdocuments.net/reader034/viewer/2022051323/549eaf45ac79591f768b47dd/html5/thumbnails/4.jpg)
Animation Building BlocksTransforms: 2D and 3DMove (Relative)Scale, Rotate, Skew, OpacitySpecify a transform origin
TransitionsTweening between statesEasing curveDiscrete state changes
ElementsBlock + In-Line Elements
Only animation technology that works on Android, iOS, RIM, Meego
GPU ACCELERATED!
![Page 5: Creating CSS3 Animations with Sencha Animator](https://reader034.vdocuments.net/reader034/viewer/2022051323/549eaf45ac79591f768b47dd/html5/thumbnails/5.jpg)
CSS TransformsTransforms transform the ENTIRE coordinate grid.- Nested transforms accumulate coordinate grid transformations
Scaling by 150% Adjusts EVERYTHING by 150%
Move 10pxMove 10px
![Page 6: Creating CSS3 Animations with Sencha Animator](https://reader034.vdocuments.net/reader034/viewer/2022051323/549eaf45ac79591f768b47dd/html5/thumbnails/6.jpg)
Transform Origin
100%100%
0%100%
100%0%
0%0%
100%100%
100%0%
0%0%
0%100%
PERCENT OR PIXELS
50%, 50% is implied default
![Page 7: Creating CSS3 Animations with Sencha Animator](https://reader034.vdocuments.net/reader034/viewer/2022051323/549eaf45ac79591f768b47dd/html5/thumbnails/7.jpg)
CSS Transition Properties background-colorbackground-image (gradients)background-positionborder-bottom-colorborder-bottom-widthborder-colorborder-left-colorborder-left-widthborder-right-colorborder-right-widthborder-spacingborder-top-colorborder-top-widthborder-widthbottomcolorcropfont-sizefont-weightgrid-*height
leftletter-spacingline-heightmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-widthmin-heightmin-widthopacityoutline-coloroutline-offsetoutline-widthpadding-bottompadding-leftpadding-rightpadding-toprighttext-indenttext-shadow
topvertical-alignvisibilitywidthword-spacingz-indexzoom
stop-colorstop-opacityfillfill-opacitystrokestroke-dasharraystroke-dashoffsetstroke-miterlimit
![Page 8: Creating CSS3 Animations with Sencha Animator](https://reader034.vdocuments.net/reader034/viewer/2022051323/549eaf45ac79591f768b47dd/html5/thumbnails/8.jpg)
CSS AnimationsOnly e!ect properties during execution 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/
![Page 9: Creating CSS3 Animations with Sencha Animator](https://reader034.vdocuments.net/reader034/viewer/2022051323/549eaf45ac79591f768b47dd/html5/thumbnails/9.jpg)
Easing Curves
Built-In Functions - Ease (default) - Ease-in/Ease-out - Ease-in - Ease-out
Custom bezier- custom-bezier (p1x,p1y, p2x, p2y)
![Page 10: Creating CSS3 Animations with Sencha Animator](https://reader034.vdocuments.net/reader034/viewer/2022051323/549eaf45ac79591f768b47dd/html5/thumbnails/10.jpg)
Errata and Vendor Prefixes-moz and -webkit-webkit-box-shadow etc.
No gradient transitions
Fonts, line-height tweened at increments of font value
![Page 11: Creating CSS3 Animations with Sencha Animator](https://reader034.vdocuments.net/reader034/viewer/2022051323/549eaf45ac79591f768b47dd/html5/thumbnails/11.jpg)
Chrome vs. SafariChrome interpolates missing frame values
Chrome applies a transition when two transforms are applied to an object
Chrome drops anti-aliasing, and lacks GPU acceleration for 3D
Safari uses intrinsic values (correct)
Safari applies only the last transform (correct)
Safari & mobile Safari often retain anti-aliasing & have GPU acceleration
![Page 12: Creating CSS3 Animations with Sencha Animator](https://reader034.vdocuments.net/reader034/viewer/2022051323/549eaf45ac79591f768b47dd/html5/thumbnails/12.jpg)
Sencha Animator
![Page 13: Creating CSS3 Animations with Sencha Animator](https://reader034.vdocuments.net/reader034/viewer/2022051323/549eaf45ac79591f768b47dd/html5/thumbnails/13.jpg)
Animator Productivity TipsNEST NEST NEST NEST- Wrapper divs are a huge productivity boost
Watch your transform origins- Losing track of them can cause much pain
Watch base object vs. keyframe animations- keyframes over-ride base object - ....until you disable keyframe values !
Overflow:hidden can work as a poor-man’s mask
Scale text to maximum size that you need
![Page 14: Creating CSS3 Animations with Sencha Animator](https://reader034.vdocuments.net/reader034/viewer/2022051323/549eaf45ac79591f768b47dd/html5/thumbnails/14.jpg)
Crazy CSS3 Hacks
![Page 15: Creating CSS3 Animations with Sencha Animator](https://reader034.vdocuments.net/reader034/viewer/2022051323/549eaf45ac79591f768b47dd/html5/thumbnails/15.jpg)
Gradients, Clipping & Masks
slight background gradientbackground-clip: text
2 radial gradients: multiple color stops radial gradient: multiple color stops
box-reflect on underlay DIV
![Page 16: Creating CSS3 Animations with Sencha Animator](https://reader034.vdocuments.net/reader034/viewer/2022051323/549eaf45ac79591f768b47dd/html5/thumbnails/16.jpg)
CSS Hack for Shape BlursFind a character that looks like the shape you need
Set fill to opaque
Set shadow with 0,0 o!set and an appropriate color and blur
Scale, rotate & skew to get desired results
Find a web font with a shape you need!
![Page 17: Creating CSS3 Animations with Sencha Animator](https://reader034.vdocuments.net/reader034/viewer/2022051323/549eaf45ac79591f768b47dd/html5/thumbnails/17.jpg)
What You Can’t Do...Direct Motion PathsCombine wrapper divs and custom easing functions to get thereHuge need for a pathing tool
Advanced Text ManipulationText on a curve/pathSub-pixel kerningHand-animated text is possible but very time-consuming
Sub-Element Animationse.g “typewriter”-style animations are very time consuming
Filters (on the CSS wish-list since 1998!) - would enable blurs etc.
![Page 18: Creating CSS3 Animations with Sencha Animator](https://reader034.vdocuments.net/reader034/viewer/2022051323/549eaf45ac79591f768b47dd/html5/thumbnails/18.jpg)
3D Transforms-webkit-preserve-3DWithout this, child divs are flattened into the plane of their parent div
-webkit-perspectiveAutomatically applies a perspectiveUsed poorly = crazy foreshortening
Poor desktop performanceQuite smooth on iPhone 4/iPad
![Page 19: Creating CSS3 Animations with Sencha Animator](https://reader034.vdocuments.net/reader034/viewer/2022051323/549eaf45ac79591f768b47dd/html5/thumbnails/19.jpg)
Roadmap
![Page 20: Creating CSS3 Animations with Sencha Animator](https://reader034.vdocuments.net/reader034/viewer/2022051323/549eaf45ac79591f768b47dd/html5/thumbnails/20.jpg)
![Page 21: Creating CSS3 Animations with Sencha Animator](https://reader034.vdocuments.net/reader034/viewer/2022051323/549eaf45ac79591f768b47dd/html5/thumbnails/21.jpg)
![Page 22: Creating CSS3 Animations with Sencha Animator](https://reader034.vdocuments.net/reader034/viewer/2022051323/549eaf45ac79591f768b47dd/html5/thumbnails/22.jpg)
Check It Out
www.sencha.com/products/animator