Upload
sencha
View
9.203
Download
1
Embed Size (px)
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.
Citation preview
CSS AnimationsWith Sencha Animator
MICHAEL MULLANY, SENCHA
Session OutlineWhy animations?
Transforms & transitionsAnimations
Browser supportSencha AnimatorCrazy CSS Hacks
Roadmap Interface
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!
CSS TransformsTransforms transform the ENTIRE coordinate grid.- Nested transforms accumulate coordinate grid transformations
Scaling by 150% Adjusts EVERYTHING by 150%
Move 10pxMove 10px
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
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
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/
Easing Curves
Built-In Functions - Ease (default) - Ease-in/Ease-out - Ease-in - Ease-out
Custom bezier- custom-bezier (p1x,p1y, p2x, p2y)
Errata and Vendor Prefixes-moz and -webkit-webkit-box-shadow etc.
No gradient transitions
Fonts, line-height tweened at increments of font value
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
Sencha Animator
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
Crazy CSS3 Hacks
Gradients, Clipping & Masks
slight background gradientbackground-clip: text
2 radial gradients: multiple color stops radial gradient: multiple color stops
box-reflect on underlay DIV
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!
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.
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
Roadmap
Check It Out
www.sencha.com/products/animator