You are previewing CSS Animations and Transitions for the Modern Web.
O'Reilly logo
CSS Animations and Transitions for the Modern Web

Book Description

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

  • Table of Contents

    1. Title Page
    2. Copyright Page
    3. Acknowledgments
    4. About the Author
    5. Table of Contents
    6. Getting Started
      1. What’s Inside This Book
      2. A Note About Images and Examples
      3. How to Download Code and Example Files
      4. Who Is This Book For?
      5. How Do You Use This Book?
      6. Tools Required
        1. Universal
        2. OS X
        3. Windows
        4. Linux
    7. Chapter 1. Introduction
      1. Design Layers
        1. Animation
        2. Transitions
      2. Why Transitions and CSS Animation?
      3. Browser Support/Polyfills
      4. Ready to Get Started?
    8. Chapter 2. Transforms
      1. Browser Support and Vendor Prefixes
      2. 2-dimensional Transforms
        1. transform-origin Property
        2. 2-dimensional Transform Functions
        3. Nested Transforms
        4. Adding Multiple Transforms to an Element
        5. The Transform Rendering Model
      3. 3-dimensional Transforms
        1. perspective Property
        2. perspective-origin Property
        3. transform-style() Property
        4. backface-visibility() Property
        5. 3-dimensional Transform Functions
      4. Summary
    9. Chapter 3. Transitions
      1. Browser Support
      2. Transitions
        1. transition-property Property
        2. transition-duration Property
        3. transition-timing-function Property
        4. transition-delay Property
        5. transition shorthand Property
      3. Starting and Reversing Transitions
      4. Transition Events
      5. Animatable Properties
        1. Animatable Property List Resources
      6. Summary
    10. Chapter 4. Animations
      1. Browser Support
        1. Detecting Browser Support
        2. Finding JavaScript Libraries for Animation
      2. CSS Animations
        1. CSS Positioning
        2. Smoothing the Animation
      3. The @Keyframes Rule
      4. animation-* Properties
        1. animation-name Property
        2. animation-duration Property
        3. animation-timing-function Property
        4. animation-iteration-count Property
        5. animation-direction Property
        6. animation-play-state Property
        7. animation-delay Property
        8. animation-fill-mode Property
        9. animation Shorthand Property
      5. Animation Events
        1. Types of Animation Events
      6. Transition or Animation
        1. Similarities
        2. Differences
        3. Choosing Transitions or Animations
        4. Performance
      7. Summary
    11. Chapter 5. More Realistic Animation
      1. Disney’s 12 Principles of Animation
      2. Squash and Stretch
      3. Anticipation
      4. Staging
      5. Straight-Ahead Action and Pose-to-Pose Action
      6. Follow-through and Overlapping Action
      7. Slow In and Slow Out (Ease In and Out)
      8. Arcs
      9. Secondary Action
      10. Timing
      11. Exaggeration
      12. Solid Drawing
      13. Appeal
      14. Beyond the 12 Principles
      15. Closing Thoughts
    12. Chapter 6. Examples
      1. How to Use the Examples
      2. Navigation Bar
      3. Modal Windows
      4. Off-canvas Sidebar Navigation
        1. Off-canvas Navigation/Sidebar: Take 1
        2. Off-canvas Navigation/Sidebar: Take 2
      5. Content Switcher
      6. Summary
    13. Chapter 7. Closing Thoughts
      1. Progressive Enhancement
      2. Trends
      3. Next Steps
      4. Thanks
    14. Appendix. Resources
      1. Chapter 1: Introduction
        1. Browser Support
        2. Polyfills
      2. Chapter 2: Transforms
        1. Visual Formatting Model
        2. Transform Matrix
      3. Chapter 3: Transitions
        1. Timing Functions
        2. Transition Events
        3. Animatable Properties
      4. Chapter 4: Animation
        1. Animation Events
        2. Transitions vs. Animations
        3. Performance
      5. Chapter 5: More Realistic Animation
        1. Disney’s 12 Principles of Animation
        2. Applying Animation Principles to User Interface Design
      6. Chapter 6: Examples
        1. Effects
    15. Index
    16. Code Snippets