Synopses & Reviews
Modern websites use a variety of animated effects not only to improve usability but also to delight and surprise users. Some of these effects require complex scripting or programming skills, but many are within the grasp of designers who are already familiar with CSS and HTML. CSS Animations and Transitions for the Modern Web shows designers how to add movement to web pages over time using CSS3 style definitions.
Author Steven Bradley begins as simply as possible and uses elementary skills as the basis for more advanced techniques. Conceptual explanation is combined with specific examples to give designers a solid foundation in
the art of creating dynamic and appealing websites. Steven’s examples are posted at peachpit.com so readers can see the animations in action and download the code files for further study. Instructions for access are in the “Getting Started” section.
With CSS Animations and Transitions for the Modern Web, you’ll learn how to make your websites more vibrant and compelling with user interfaces that are functional, reliable, and usable, as well as beautiful.
- Up-to-date information on current browser support for CSS animations and transitions
- An introduction to manipulating web page objects in both 2D and 3D space
- Techniques for creating smooth transitions between object states
- An overview of Disney’s principles for creating realistic animation and how they apply to web page designs
Synopsis
Using CSS to add transitions and animation to web page designs takes advantage of the dynamic nature of designing for the web. They are quickly becoming the de facto way designers can add a measure of delight and surprise to web pages. More importantly, they can help make web pages more usable.
Using stunning visuals and design, CSS Animations and Transitions for the Modern Web teaches web designers how to dynamically change design elements on a web page over time. It starts by showing a variety of ways you can transform elements and then teaches two different methods for setting the change in motion in action. The book will start the topic as simply as possible and build on the basics with more elaborate techniques. Simple examples will be presented throughout and the book will close with more detailed, complex, and practical examples.
For most of his examples, Steven uses the new open-source code editor from Adobe, Brackets, but the book is perfectly usable with any code editing environment or even a simple text editor.
About the Author
Steven Bradley has been making a living building and marketing Web sites for small businesses. He specializes in building usable and search engine-friendly Web sites so whether visitors to his clients’ sites are living breathing humans or search engine spiders, either will have an enjoyable experience. He’s also a blogger who writes about web design and development. After teaching himself the principles of design, Steven self-published an ebook on design aimed at Web coders called Design Fundamentals: Elements, Attributes, and Principles. In addition to writing for his own web site, vanseodesign.com, he’s written for sites like Smashing Magazine, the Tuts+ family of sites, the Developer Connection section of Adobe.com, as well as a variety of other design and development sites. Born in Brooklyn, Steven now lives in Boulder, CO.
Table of Contents
Chapter 1: Introduction
• Why CSS Animation is Important
• Critical and Non-Critical Visual Experience
• Tools: What you need
Chapter 2: Transforms
• Browser Support
• Fallbacks and PolyFills
• CSS Visual Formatting Model
• The Transform Rendering Model
• 2-Dimensional Transforms
- transform property
- transform-origin property
• 3-Dimensional Transforms
- Perspective property
- Perspective-origin property
- Backface-visibility property
• Transform Functions
- 2-Dimensional Functions
matrix()
translate()
translateX()
translateY()
scale()
scaleX()
scaleY()
rotate()
skew()
skewX()
- 3-Dimensional Functions
matrix3d()
translate3d()
translateZ()
scale3d()
scaleZ()
rotate3d()
rotateX()
rotateY()
rotateZ()
perspective()
• Combining Transforms
Chapter 3: Transitions
• Browser Support
• Fallbacks and PolyFills
• Transition Properties
- Transition-property
- Transition-duration property
- Transition-timing-function property
ease
linear
ease-in
ease-out
ease-in-out
step-start
step-end
steps
cubic-bezier
- Transition-delay property
- Transition shorthand property
• Starting and Reversing Transitions
• CSS properties that can be transitioned
• Transition Events
Chapter 4: Animation
• Browser Support
• Fallbacks and PolyFills
• Keyframes
- @Keyframes rule
• Animation Behavior
- Differences between animation and transitions
• Animation Properties
- animation-name property
- animation-duration property
ease
linear
ease-in
ease-out
ease-in-out
step-start
step-end
steps
cubic-bezier
- animation-timing-function property
- animation-iteration-count property
- animation-direction property
- animation-play-state property
- animation-delay property
- animation-fill-mode property
- Animation shorthand property
• CSS Properties that can be animated
• Animation Events
- Animation-start
- Animation-end
- Animation-iteration
Chapter 5: Principles for More Realistic Animation
• When to use Transitions and when to use animation
• Disney's Twelve principles of animation
- Squash and stretch
- Anticipation
- Staging
- Straight Ahead Action and Pose to Pose
- Follow Through and Overlapping Action
- Slow In and Slow Out
- Arcs
- Secondary Action
- Timing
- Exaggeration
- Solid Drawing
- Appeal
Chapter 6: Examples
End Matter
• Resources
• About the Author
• Index