Pro CSS3 Animation Dudley Storey Pro CSS3 Animation Copyright © 2012 by Dudley Storey This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Exempted from this legal reservation are brief excerpts in connection with reviews or scholarly analysis or material supplied specifically for the purpose of being entered and executed on a computer system, for exclusive use by the purchaser of the work. Duplication of this publication or parts thereof is permitted only under the provisions of the Copyright Law of the Publisher’s location, in its current version, and permission for use must always be obtained from Springer. Permissions for use may be obtained through RightsLink at the Copyright Clearance Center. Violations are liable to prosecution under the respective Copyright Law. ISBN-13 (pbk): 978-1-43024722-7 ISBN-13 (electronic): 978-1-4302-4723-4 Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. President and Publisher: Paul Manning Lead Editor: Louise Corrigan Technical Reviewer: Sylvain Galineau Editorial Board: Steve Anglin, Ewan Buckingham, Gary Cornell, Louise Corrigan, Morgan Ertel, Jonathan Gennick, Jonathan Hassell, Robert Hutchinson, Michelle Lowman, James Markham, Matthew Moodie, Jeff Olson, Jeffrey Pepper, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Gwenan Spearing, Matt Wade, Tom Welsh Coordinating Editor: Kevin Shea Copy Editor: Elizabeth Berry Compositor: SPi Global Indexer: SPi Global Artist: SPi Global Cover Designer: Anna Ishchenko Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail [email protected] , or visit www.springeronline.com . [email protected] For information on translations, please e-mail , or visit www.apress.com . Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference www.apress.com/bulk- our Special Bulk Sales–eBook Licensing web page at sales . Any source code or other supplementary materials referenced by the author in this text is available to www.apress.com readers at . For detailed information about how to locate your book’s www.apress.com/source-code source code, go to . To my grandparents, who never had the chance to read their grandson’s first book. —Dudley Storey Contents at a Glance About the Author Introduction Chapter 1: CSS3 Fundamentals Chapter 2: CSS3 Transforms and Transitions Chapter 3: CSS3 Transitions for Images Chapter 4: CSS3 Transitions for UI Elements Chapter 5: CSS3 Keyframe Animations Chapter 6: CSS3 Keyframe Animations for Web Content Chapter 7: Integrating CSS3 Animations with SVG and Filters Chapter 8: Integrating CSS3 Animation with Responsive Web Design and JavaScript Chapter 9: CSS3 3D Transforms, Transitions, and Animations Chapter 10: Tools, Technologies, and the Future of CSS Animation Index Contents About the Author Introduction Chapter 1: CSS3 Fundamentals Development of CSS CSS Vendor Prefixes Vendor Prefixing Issues CSS3 Browser Support Limitations of CSS3 Animation Design Principles: Progressive Enhancement and Graceful Degradation Why CSS3 Rather Than JavaScript or Flash? Other Technologies Summary Chapter 2: CSS3 Transforms and Transitions CSS Transforms Rotate The Webkit CSS3 Transform Aliasing Issue Scale Translate Skew Combining Transformations CSS Transitions Delaying and Combining Transition Effects Introducing Easing Functions Transition Timing Functions and Bezier Curves Summary Chapter 3: CSS3 Transitions for Images Simple Image CrossFade Effect Option 1: First Image As a CSS Background Option 2: Both Images As HTML Elements Option 3: Both Images As Backgrounds A Simple Image Gallery Enhanced with CSS3 The HTML Markup The Initial CSS Improving the Gallery Adding Captions Changing the Initiating Event Simple Popup Image Captions Image Card Stack and Fan Reveal Clapperboard Image Captions with Different Entry and Exit Effects Creating Separate Transition Sequences Changing the Exit Event Background Image Transitions and Animation on Page Load Animating the Background Images on Load Creating and Animating Fake Background Images Summary Chapter 4: CSS3 Transitions for UI Elements Modern Site Navigation Markup Horizontal Navigation Bar Basics A Simple Navigation Bar Enhanced with CSS3 Highlighting the Current Page in Navigation Horizontal Tab Navigation with CSS3 Transitions Animating Custom Validation Errors for HTML5 Forms UI Button Depress Transition UI Button Reveal Transition Accessible Horizontal Drop-down Navigation with CSS3 Transitions Initiating CSS3 Transition Effects After a Button Click Animating Form Elements with CSS3 Summary Chapter 5: CSS3 Keyframe Animations Keyframes and Tweening CSS3 Keyframe Animation Syntax Support for Keyframe Animation in Older Browsers Controlling Keyframe Animation Playback Blending and Chaining Keyframe Animations Repeating Animation Sequences Pausing Keyframe Animations Summary Chapter 6: CSS3 Keyframe Animations for Web Content A Simple CSS3 Slideshow The HTML Code A Variation with Background Images Pausing the Slideshow Altering the Transition Between Images Fade-In-Out Fade-In-Out During Motion CrossFade Adding Captions An On-Click Method for Pause Creating a Fallback for Older Versions of Internet Explorer A Caution Against Using Marquee Animation for Text News Ticker/Notification Animation A Lightbox Image Gallery Equivalent in CSS3 Adding Captions Logo Animation on Page Load Summary Chapter 7: Integrating CSS3 Animations with SVG and Filters An Introduction to SVG Placing SVG on a Web Page SVG As an Inline Image Inline SVG SVG Added As an Object or iframe Manipulating SVG with CSS An Animated SVG Imagemap SVG Snowflake Animation Tools for SVG Introduction to CSS3 Filters Summary Chapter 8: Integrating CSS3 Animation with Responsive Web Design and JavaScript Resizing Elements in Responsive Web Design Without Transitions Dynamically Resizing Images and Videos Responsive Background Images Resizing Elements in Responsive Web Design with Transitions Indicating Viewport Size with CSS3 Media Queries and Transitions Optimizing CSS Transitions and Animations for Mobile Devices Integrating CSS3 Media Queries with SVG
Description: