book

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

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

by Alexis Goldstein

December 2012

Beginner to intermediate

264 pages

7h 5m

English

Addison-Wesley Professional

Read now

Unlock full access

Title Page
Copyright Page
Dedication Page
Contents at a Glance
Table of Contents
Preface
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
Acknowledgments
About the Author
1. Working with CSS3 Animations
Intro to CSS3 AnimationsSummary of CSS3 Animation ToolsThe Modernizr LibraryHardware AccelerationA Final Word on Working with CSS3 Animations
2. Building a Foundation with Transforms
Introducing TransformsTransform FunctionsBuilding a Bicycle in CSS3SummaryChallenge

3. Animating Elements with Transitions
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
4. Keyframe Animations
Introduction to Keyframe AnimationsControlling a Keyframe Animation with PropertiesAnimating a Recoiling SpringAnimating a Floating BalloonSummaryChallenge
5. Creating 3D Effects with Parallax Scrolling
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
6. Adding Depth with 3D Transforms
Introduction to 3D TransformsDrawing a 3D CubeCreating a House of CardsSummaryChallenge
7. Animating 2D and 3D Transforms
Basic 3D Transform Animations with TransitionsOptimizing PerformanceBlowing in the Wind: Animating Dandelion SeedsSummaryChallenge
8. Using Transitions and Transforms to Animate Text
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
9. Building Flash-Style Animations with Keyframe Animations
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
10. Creating Animated Infographics
What Are Infographics?Visualizing Data for Mixed DrinksSummaryChallenge
11. Building Interactive Infographics
Creating an Element to Hold the Drink RecipesUnveiling the Recipe PageHighlighting the Selected IngredientSummaryChallenge
Index

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

2. Building a Foundation with Transforms

Transforms serve as the foundation for many of the animations described in this book. This chapter introduces the various kinds of two-dimensional transforms that can be accomplished with CSS3. As a sample project, you will create a bicycle using only CSS, and you will use CSS3 transforms to assist in its creation.

Introducing Transforms

With CSS3 transforms, you can manipulate elements by using various transform functions, changing their skew, scale, and rotation, for example. You use the transform property together with one or more transform functions that define how to change an element. These are the available transform functions:

rotate: You use this function to rotate an element clockwise ...

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.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

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

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

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

by Alexis Goldstein