Alexis Goldstein - Learning CSS3 Animations and Transitions: A Hands-on Guide to Animating in CSS3 with Transforms, Transitions, Keyframes, and JavaScript

A Hands-on Guide to Animating in CSS3 with Transforms, Transitions, Keyframe Animations, and JavaScript

Alexis Goldstein

Upper Saddle River, NJ Boston Indianapolis San Francisco
New York Toronto Montreal London Munich Paris Madrid
Cape Town Sydney Tokyo Singapore Mexico City

Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and the publisher was aware of a trademark claim, the designations have been printed with initial capital letters or in all capitals.

The author and publisher have taken care in the preparation of this book, but make no expressed or implied warranty of any kind and assume no responsibility for errors or omissions. No liability is assumed for incidental or consequential damages in connection with or arising out of the use of the information or programs contained herein.

The publisher offers excellent discounts on this book when ordered in quantity for bulk purchases or special sales, which may include electronic versions and/or custom covers and content particular to your business, training goals, marketing focus, and branding interests. For more information, please contact:

U.S. Corporate and Government Sales
(800) 382-3419

For sales outside the United States, please contact:

International Sales

Visit us on the Web: informit.com/aw

Library of Congress Cataloging-in-Publication Data is on file.

Copyright 2013 Pearson Education, Inc.

All rights reserved. Printed in the United States of America. This publication is protected by copyright, and permission must be obtained from the publisher prior to any prohibited reproduction, storage in a retrieval system, or transmission in any form or by any means, electronic, mechanical, photocopying, recording, or likewise. To obtain permission to use material from this work, please submit a written request to Pearson Education, Inc., Permissions Department, One Lake Street, Upper Saddle River, New Jersey 07458, or you may fax your request to (201) 236-3290.

Adobe and Flash are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.

ISBN-13: 978-0-321-83960-2
ISBN-10: 0-321-83960-9

Text printed in the United States on recycled paper at Edward Brothers Malloy in Ann Arbor, MI.

First printing: December 2012

Editor-in-Chief:
Mark Taub

Acquisitions Editor:
Trina MacDonald

Development Editor:
Michael Thurston

Managing Editor:
Kristy Hart

Project Editor:
Elaine Wiley

Copy Editor:
Kitty Wilson

Indexer:
WordWise Publishing Services

Proofreader:
Deborah Williams

Technical Reviewers:
Joseph Annuzzi, Jr. Louis Lazaris

Editorial Assistant:
Olivia Basegio

Cover Designer:
Chuti Prasertsith

Senior Compositor:
Gloria Schurick

To my family

Welcome aboard Learning CSS3 Animations! Were so glad youve joined us for a journey through all the fun that CSS animations can bring. This practical, example-driven text explains the basics of CSS animations and how you can use them, and it provides you with plenty of examples both simple and complex in order to give you many jumping-off points for your own code. You will explore examples that are purely HTML and CSS driven, as well as examples that make use of JavaScript and jQuery to serve as animation triggers or to add interactivity to the page.

CSS3 has brought with it a wave of new ways to add life, movement, and neat effects to your sites. These can be simple enhancements to existing pages, or they can be rich, complex animations that add new content to your sites.

The cornerstone of this book is simple code examples and detailed explanations of the techniques used in the code. The book presents a series of examples that highlight a given CSS animation technique and gives you a starting point to customize your own sites and projects.

Where it is practical to do so, the examples use CSS itself in order to craft CSS-created graphics rather than relying on images. The idea behind this approach is that it gives you more practice using the inherent drawing and visual effect-creating abilities of CSS3. But, one can just as easily take the animation concepts learned in such examples, and use with custom tailored images.

This book is aimed at beginning and intermediate-level web developers and designers who have a solid foundation in HTML and CSS, as well as a basic grasp of HTML5 and CSS3. While you need not have expert-level knowledge of all topics in CSS3 (if you did, you wouldnt need this book), you should have an overall grasp of things like vendor prefixes and how they are used in CSS3, as well as popular new properties in CSS3, such as text-shadow and border-radius.

This book is not for absolute beginners who have never used HTML or CSS. This book is also not for those with basic HTML or CSS skills and no experience at all in CSS3 who are looking to get up to speed. This book presumes a solid foundation in HTML/CSS and at least a passing familiarity with the new CSS3 properties (those that dont have to do with animations, that is!).

If you are not familiar with basic CSS concepts such as what a selector is, the kinds of selectors you have to choose from, and how you use them, youll need to acquire that knowledge before this book is of use to you. This book does not devote any time to reviewing the basics of CSS, how it interacts with HTML, and the most common CSS properties.

This book consists of 11 chapters, each of which contains detailed code examples to demonstrate the concepts discussed. Nearly all chapters build on content presented in previous chapters. It is suggested that you read them continuously rather than skip around.

discusses the approach this book takes to browser support, including a review of the Modernizr JavaScript library, which you can use to detect which HTML5 features are supported in the users browser, as well as other tools and resources that are recommended for use throughout this book in order to make development easier.

Much of this book leverages the power of CSS3 transforms. introduces the various kinds of two-dimensional transforms that can be accomplished with CSS3, in order to get you familiar with the effects it can achieve. In this chapter, you use transforms to draw a bicycle using only CSS.

to spin the bike wheels and move the bike itself in response to user actions.

Keyframe animations give you more fine-grained control over the various stages of an animation than transitions do. In you learn about the many properties available for use with keyframe animations by applying them to a simple animation. You also create a bouncing spring and a floating balloon in order to see the effects you can achieve through the use of keyframe animations.