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.

2. CSS Animations
With Sencha Animator
MICHAEL MULLANY, SENCHA

3. Session Outline
Why animations?
Transforms & transitions
Animations
Browser support
Sencha Animator
Crazy CSS Hacks
Roadmap Interface

4. Animation Building Blocks
Transforms: 2D and 3D
Move (Relative)
Scale, Rotate, Skew, Opacity Only animation
Specify a transform origin
technology that works
Transitions on Android, iOS, RIM,
Tweening between states
Easing curve
Meego
Discrete state changes
Elements GPU ACCELERATED!
Block + In-Line Elements

5. CSS Transforms
Transforms transform the ENTIRE coordinate grid.
- Nested transforms accumulate coordinate grid transformations
Move 10px
Scaling by 150% Adjusts EVERYTHING by 150%

6. 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%

7. CSS Transition Properties
background-color left top
background-image letter-spacing vertical-align
(gradients) line-height visibility
background-position margin-bottom width
border-bottom-color margin-left word-spacing
border-bottom-width margin-right z-index
border-color margin-top zoom
border-left-color max-height
border-left-width max-width stop-color
border-right-color min-height stop-opacity
border-right-width min-width fill
border-spacing opacity fill-opacity
border-top-color outline-color stroke
border-top-width outline-offset stroke-dasharray
border-width outline-width stroke-dashoffset
bottom padding-bottom stroke-miterlimit
color padding-left
crop padding-right
font-size padding-top
font-weight right
grid-* text-indent
height text-shadow

8. CSS Animations
Only 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/

9. Easing Curves
Built-In Functions
- Ease (default)
- Ease-in/Ease-out
- Ease-in
- Ease-out
Custom bezier
- custom-bezier (p1x,p1y, p2x, p2y)

10. Errata and Vendor Prefixes
-moz and -webkit
-webkit-box-shadow etc.
No gradient transitions
Fonts, line-height tweened at
increments of font value

11. Chrome vs. Safari
Chrome interpolates missing Safari uses intrinsic values
frame values (correct)
Chrome applies a transition when Safari applies only the last
two transforms are applied to an transform (correct)
object
Chrome drops anti-aliasing, and Safari & mobile Safari often retain
lacks GPU acceleration for 3D anti-aliasing & have GPU
acceleration

12. Sencha Animator

13. Animator Productivity Tips
NEST 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

14. Crazy CSS3 Hacks

15. Gradients, Clipping & Masks
2 radial gradients: multiple color stops radial gradient: multiple color stops
background-clip: text
slight background gradient
box-reflect on underlay DIV

16. CSS Hack for Shape Blurs
Find 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!

17. What You Can’t Do...
Direct Motion Paths
Combine wrapper divs and custom easing functions to get there
Huge need for a pathing tool
Advanced Text Manipulation
Text on a curve/path
Sub-pixel kerning
Hand-animated text is possible but very time-consuming
Sub-Element Animations
e.g “typewriter”-style animations are very time consuming
Filters (on the CSS wish-list since 1998!) - would enable blurs etc.

18. 3D Transforms
-webkit-preserve-3D
Without this, child divs are
flattened into the plane of their
parent div
-webkit-perspective
Automatically applies a
perspective
Used poorly = crazy foreshortening
Poor desktop performance
Quite smooth on iPhone 4/iPad

19. Roadmap

22. Check It Out
www.sencha.com/products/animator