Home > Articles > Web Development > HTML/CSS

Working with CSS3 Animations: Tools for Browser Support

  • Print
  • + Share This
  • 💬 Discuss
CSS3 animations have gained enormous interest and popularity, in part due to the lack of support for traditional Flash animations in mobile devices such as the iPhone. This chapter introduces the tools this book uses to deal with browser support. It reviews how to use the Modernizr JavaScript library to ensure that older browsers are notified of missing content and nudge users toward a newer browser. This chapter also reviews other tools and resources that make development easier.

Intro to CSS3 Animations

The effects available with CSS3-driven animations can typically be achieved through other means, such as JavaScript-based animations and Flash®. So why use CSS3 animations?

Like much of HTML5, the CSS3 animations and related specs bring techniques commonly accomplished through plugins or external libraries and make them part of the core standard. CSS3 also simplifies the process of creating animations, allowing us to leverage web standards to create dynamic effects rather than use plugins such as Flash® that do not work on all devices.

This book explores the new features of CSS3 animations, explaining how to use them through basic examples that demonstrate the key concepts. More than focusing on what is safe or conservative or universal, this book digs into what’s possible with a little imagination. As you work with CSS3 animations in this book, you won’t be bending over backward to accommodate older browsers. While it is certainly possible to re-create every animation you will build in this book in a JavaScript library such as jQuery or MooTools in order to achieve universal support, this isn’t a book about animating with JavaScript libraries. This book instead focuses on creating animations for modern browsers and mobile devices, and it avoids re-creating the animations for older, unsupported browsers. And while this book doesn’t specify exhaustive fallback code and explanations in absolutely every chapter, it does provide you with fallbacks often enough that you will have the knowledge and practice you need to write your own custom fallbacks, as needed.

The source code for this and all subsequent chapters can be found on this book’s GitHub site: https://github.com/alexisgo/LearningCSSAnimations. I have also supplied a demo site, alexisgo.github.com/LearningCSSAnimations/, where you can find demos of all examples, so that you can follow along with the code and see the results as you make your way through this book.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus