book

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

by Alexis Goldstein

December 2012

Beginner to intermediate

264 pages

7h 5m

English

Addison-Wesley Professional

Read now

Unlock full access

Who This Book Is ForWho This Book Isn’t ForHow This Book Is OrganizedChapter 1, “Working with CSS3 Animations”Chapter 2, “Building a Foundation with Transforms”Chapter 3, “Animating Elements with Transitions”Chapter 4, “Keyframe Animations”Chapter 5, “Creating 3D Effects with Parallax Scrolling”Chapter 6, “Adding Depth with 3D Transforms”Chapter 7, “Animating 2D and 3D Transforms”Chapter 8, “Using Transitions and Transforms to Animate Text”Chapter 9, “Building Flash-Style Animations with Keyframe Animations”Chapter 10, “Creating Animated Infographics”Chapter 11, “Building Interactive Infographics”About the Sample Code
Intro to CSS3 AnimationsSummary of CSS3 Animation ToolsThe Modernizr LibraryHardware AccelerationA Final Word on Working with CSS3 Animations
Introducing TransformsTransform FunctionsBuilding a Bicycle in CSS3SummaryChallenge

Introduction to TransitionsTriggering a Transition Animation with Hover EventsTriggering a Transition Animation with Click EventsTransition PropertiesSpinning the Bike WheelsAnimating the Bike to Move Across the ScreenSummaryChallenge
Introduction to Keyframe AnimationsControlling a Keyframe Animation with PropertiesAnimating a Recoiling SpringAnimating a Floating BalloonSummaryChallenge
Introduction to Parallax ScrollingA Three-Layer Parallax Scrolling AnimationAnimating Several Scenes with Parallax ScrollingThe Animation’s Layout and Basic StylesScene 1: Creating a Skateboarding RobotScene 2: Moving Between LandscapesScene 3: Making the Robot WalkSummaryChallenge
Introduction to 3D TransformsDrawing a 3D CubeCreating a House of CardsSummaryChallenge
Basic 3D Transform Animations with TransitionsOptimizing PerformanceBlowing in the Wind: Animating Dandelion SeedsSummaryChallenge
Introduction to the Typewriter ExampleThe Animation’s Layout and Basic StylesScene 1: Making the Quote Rise Up the ScreenScene 2: Making Text FallScene 3: Scrolling TextScene 4: Growing TextScene 5: Continuing the AnimationSummaryChallenge
Introduction to the Meow Street Fat Cat AnimationThe Animation’s Layout and Basic StylesScene 1: Moving the NewspaperScene 2: Reading the NewspaperScene 3: Moving to and Reading Page 2Scene 4: Moving the Animation OutsideScene 5: Adding Murphy, the Toughest Cat Cop on the BeatScene 6: Knocking on Morgan’s DoorScene 7: Animating a Spinning NewspaperSupport for Opera 12SummaryChallenge
What Are Infographics?Visualizing Data for Mixed DrinksSummaryChallenge
Creating an Element to Hold the Drink RecipesUnveiling the Recipe PageHighlighting the Selected IngredientSummaryChallenge

Content preview from Learning CSS3 Animations and Transitions: A Hands-on Guide to Animating in CSS3 with Transforms, Transitions, Keyframes, and JavaScript

Learning CSS3 Animations and Transitions

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

Alexis Goldstein

Upper Saddle River, NJ • Boston • Indianapolis • San FranciscoNew York • Toronto • Montreal • London • Munich • Paris • MadridCape Town • Sydney • Tokyo • Singapore • Mexico City

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Start your free trial

Learning CSS3 Animations and Transitions (Companion Video): Hands-on Guide to Animating in CSS3 with Transforms, Transitions, Keyframe Animations, and JavaScript

Alexis Goldstein

CSS Animations and Transitions for the Modern Web

Steven Bradley

Transitions and Animations in CSS

Estelle Weyl

Creative CSS Animations, Transitions and Transforms Course [Updated for 2021]

Ahmed Sadek

Publisher Resources

ISBN: 9780133064438