book

Pro CSS3 Animation

December 2012

Intermediate to advanced

178 pages

4h 47m

English

Read now

Unlock full access

Development of CSSCSS Vendor PrefixesCSS3 Browser SupportLimitations of CSS3 AnimationDesign Principles: Progressive Enhancement and Graceful DegradationWhy CSS3 Rather Than JavaScript or Flash?Other TechnologiesSummary
CSS TransformsCSS TransitionsDelaying and Combining Transition EffectsSummary
Simple Image CrossFade EffectA Simple Image Gallery Enhanced with CSS3Simple Popup Image CaptionsImage Card Stack and Fan RevealClapperboard Image Captions with Different Entry and Exit EffectsBackground Image Transitions and Animation on Page LoadSummary
Modern Site Navigation MarkupHorizontal Navigation Bar BasicsA Simple Navigation Bar Enhanced with CSS3Highlighting the Current Page in NavigationHorizontal Tab Navigation with CSS3 TransitionsAnimating Custom Validation Errors for HTML5 FormsUI Button Depress TransitionUI Button Reveal TransitionAccessible Horizontal Drop-down Navigation with CSS3 TransitionsInitiating CSS3 Transition Effects After a Button ClickAnimating Form Elements with CSS3Summary

Keyframes and TweeningCSS3 Keyframe Animation SyntaxSupport for Keyframe Animation in Older BrowsersControlling Keyframe Animation PlaybackBlending and Chaining Keyframe AnimationsRepeating Animation SequencesPausing Keyframe AnimationsSummary
A Simple CSS3 SlideshowPausing the SlideshowAltering the Transition Between ImagesA Caution Against Using Marquee Animation for TextNews Ticker/Notification AnimationA Lightbox Image Gallery Equivalent in CSS3Logo Animation on Page LoadSummary
An Introduction to SVGPlacing SVG on a Web PageManipulating SVG with CSSTools for SVGSummary
Resizing Elements in Responsive Web Design Without TransitionsResizing Elements in Responsive Web Design with TransitionsIndicating Viewport Size with CSS3 Media Queries and TransitionsOptimizing CSS Transitions and Animations for Mobile DevicesIntegrating CSS3 Media Queries with SVGTriggering CSS3 Transitions with JavaScriptCustomizing CSS3 Transitions with JavaScriptSummary
PerspectiveRotationTranslateCard Caption FlipBackface VisibilityTransform StyleA Circular 3D GalleryEnhancing the Gallery with Level-4 Selectors and JavaScriptAdding a CSS Level-4 Selector3D CSS Transforms and Transitions for UI ElementsSummary
Writing Effective CSS3 Animations and Transitions: Avoiding ReflowsAutomatic Prefixing Tools: Client-SideAutomatic Prefixing Tools: Server-SideGUI-Based CSS3 Animation ToolsFuture Trends: CSS Custom FiltersFuture Trends: Blending and CompositingFuture Trends: Reconciling CSS3 and SVGSummary