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

11. Building Interactive Infographics

A natural enhancement to infographics on the web is the addition of interactivity through a language such as JavaScript or a library such as jQuery. In this chapter, you will make some simple additions to the infographic from Chapter 10, “Creating Animated Infographics,” enhancing it with the details of the drink recipes, using a combination of CSS animations and jQuery.

One thing that is missing from the example in Chapter 10 is a written description of the drink ingredients. For example, you visually demonstrated that a Rum & Coke is composed of one part rum and two parts cola, but you did not detail this in text anywhere on the page. In this chapter, you will amend that. You will add the information to ...

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

Publisher Resources

ISBN: 9780133064438

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

by Alexis Goldstein

11. Building Interactive Infographics

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.

You might also like

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

CSS Animations and Transitions for the Modern Web

Transitions and Animations in CSS

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

Publisher Resources

11. Building Interactive Infographics

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.

You might also like

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

CSS Animations and Transitions for the Modern Web

Transitions and Animations in CSS

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

Publisher Resources

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.