Pro CSS3 Animation

Pro CSS3 Animation

Released December 2012
Publisher(s): Apress
ISBN: 9781430247227

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Pro CSS3 Animation will teach you how to use fresh new CSS3 syntax to fully utilize this exciting tool for web design. Using cutting-edge industry standards and drawing on best practices for animation, you will learn how to apply CSS3 animation to transform and bring your page content to life.

CSS3 is the way forward for web page interactivity and animation, offering new and exciting options for design. Integrated with HTML5, SVG and mobile design methodologies, you can bring sites into the third dimension to change the perception and appreciation generated in your audience. This book will teach you how to:

  • Enhance your web pages, and your visitor's experience of your site, with animation

  • Animate images and other page content to create banners, interactive galleries and slideshows

  • Provide fallback and support options for older browsers

  • Chain CSS3 syntax with @media queries, filters and 3D transformations to create responsive animations with depth

  • Provide animation to mobile devices without Flash or JavaScript

    • What you'll learn

  • The advantages of CSS3 animation

  • The syntax for transitions and keyframe animations

  • How to animate navigational elements to enhance your visitor's user experience

  • How to animate images and other page content to create banners, interactive galleries and slideshows

  • How to integrate JavaScript and SVG to scale animation sequences

  • How to chain CSS3 syntax with @media queries, filters, parallax perspective and 3D transformations to create responsive animations with depth

    • Who this book is for

    Pro CSS3 Animation is for the experienced web developer who is ready to embrace modern web standards and animate their page content with powerful, cutting-edge technologies. If you want to create accessible, interactive animations with CSS or are looking for alternatives to Flash and JavaScript frameworks, Pro CSS3 Animation is for you.

    Table of contents

    1. Title
    2. Dedication
    3. Contents at a Glance
    4. Contents
    5. About the Author
    6. Introduction
    7. Chapter 1: CSS3 Fundamentals
      1. Development of CSS
      2. CSS Vendor Prefixes
      3. CSS3 Browser Support
      4. Limitations of CSS3 Animation
      5. Design Principles: Progressive Enhancement and Graceful Degradation
      6. Why CSS3 Rather Than JavaScript or Flash?
      7. Other Technologies
      8. Summary
    8. Chapter 2: CSS3 Transforms and Transitions
      1. CSS Transforms
      2. CSS Transitions
      3. Delaying and Combining Transition Effects
      4. Summary
    9. Chapter 3: CSS3 Transitions for Images
      1. Simple Image CrossFade Effect
      2. A Simple Image Gallery Enhanced with CSS3
      3. Simple Popup Image Captions
      4. Image Card Stack and Fan Reveal
      5. Clapperboard Image Captions with Different Entry and Exit Effects
      6. Background Image Transitions and Animation on Page Load
      7. Summary
    10. Chapter 4: CSS3 Transitions for UI Elements
      1. Modern Site Navigation Markup
      2. Horizontal Navigation Bar Basics
      3. A Simple Navigation Bar Enhanced with CSS3
      4. Highlighting the Current Page in Navigation
      5. Horizontal Tab Navigation with CSS3 Transitions
      6. Animating Custom Validation Errors for HTML5 Forms
      7. UI Button Depress Transition
      8. UI Button Reveal Transition
      9. Accessible Horizontal Drop-down Navigation with CSS3 Transitions
      10. Initiating CSS3 Transition Effects After a Button Click
      11. Animating Form Elements with CSS3
      12. Summary
    11. Chapter 5: CSS3 Keyframe Animations
      1. Keyframes and Tweening
      2. CSS3 Keyframe Animation Syntax
      3. Support for Keyframe Animation in Older Browsers
      4. Controlling Keyframe Animation Playback
      5. Blending and Chaining Keyframe Animations
      6. Repeating Animation Sequences
      7. Pausing Keyframe Animations
      8. Summary
    12. Chapter 6: CSS3 Keyframe Animations for Web Content
      1. A Simple CSS3 Slideshow
      2. Pausing the Slideshow
      3. Altering the Transition Between Images
      4. A Caution Against Using Marquee Animation for Text
      5. News Ticker/Notification Animation
      6. A Lightbox Image Gallery Equivalent in CSS3
      7. Logo Animation on Page Load
      8. Summary
    13. Chapter 7: Integrating CSS3 Animations with SVG and Filters
      1. An Introduction to SVG
      2. Placing SVG on a Web Page
      3. Manipulating SVG with CSS
      4. Tools for SVG
      5. Summary
    14. Chapter 8: Integrating CSS3 Animation with Responsive Web Design and JavaScript
      1. Resizing Elements in Responsive Web Design Without Transitions
      2. Resizing Elements in Responsive Web Design with Transitions
      3. Indicating Viewport Size with CSS3 Media Queries and Transitions
      4. Optimizing CSS Transitions and Animations for Mobile Devices
      5. Integrating CSS3 Media Queries with SVG
      6. Triggering CSS3 Transitions with JavaScript
      7. Customizing CSS3 Transitions with JavaScript
      8. Summary
    15. Chapter 9: CSS3 3D Transforms, Transitions, and Animations
      1. Perspective
      2. Rotation
      3. Translate
      4. Card Caption Flip
      5. Backface Visibility
      6. Transform Style
      7. A Circular 3D Gallery
      8. Enhancing the Gallery with Level-4 Selectors and JavaScript
      9. Adding a CSS Level-4 Selector
      10. 3D CSS Transforms and Transitions for UI Elements
      11. Summary
    16. Chapter 10: Tools, Technologies, and the Future of CSS Animation
      1. Writing Effective CSS3 Animations and Transitions: Avoiding Reflows
      2. Automatic Prefixing Tools: Client-Side
      3. Automatic Prefixing Tools: Server-Side
      4. GUI-Based CSS3 Animation Tools
      5. Future Trends: CSS Custom Filters
      6. Future Trends: Blending and Compositing
      7. Future Trends: Reconciling CSS3 and SVG
      8. Summary
    17. Index

    Product information

    • Title: Pro CSS3 Animation
    • Author(s):
    • Release date: December 2012
    • Publisher(s): Apress
    • ISBN: 9781430247227