- Intro to CSS3 Animations
- Summary of CSS3 Animation Tools
- The Modernizr Library
- Hardware Acceleration
- A Final Word on Working with CSS3 Animations
This chapter is from the book
This chapter is from the book
This chapter is from the book
Summary of CSS3 Animation Tools
Web developers, designers and animators can use a number of tools in order to make our lives easier and leverage the expertise of the web development community. These tools range from templates like the HTML5 Boilerplate, to online tools like css3please and Animation Fill Code, to libraries like -prefix-free.
HTML5 Boilerplate
The HTML5 Boilerplate (http://html5boilerplate.com), or “H5BP” for short, is a wonderful template started by Paul Irish and Divya Manian and maintained by a number of talented contributors, including Shi Chuan, Mathias Bynens, and Nicholas Gallagher. The H5BP allows you to leverage the collective wisdom of the web community and quickly get going with HTML5. Rather than learn through painful firsthand experience, the must-have Internet Explorer directives, or the really-should-have-added-that CSS reset, the H5BP gives you a starting point with all of that code already provided.
The H5BP includes a large collection of files in its basic template, including a 404.html page and a default favicon. For our purposes, the most important resource that comes with the H5BP is its stylesheet. Rather than rewrite custom reset styles yourself or set up your own @media queries to adjust your styles for mobile browsers as needed, why not use the tools that a panel of experts have already compiled? Throughout this book, you will see the sample code include a CSS file called base.css. This file is based on conventions in the H5BP’s stylesheets, which you can explore on their GitHub page at https://github.com/h5bp/html5-boilerplate.
Tools for Generating Vendor Prefixes
One of the biggest headaches of writing CSS3 animations—particularly keyframe animations, which are covered in Chapter 4—is generating all the appropriate vendor prefixes. Two tools can help you do this: Prefixr and css3please.
Prefixr
One tool that I strongly recommend to assist you with the generation of the vendor-specific code is Prefixr (http://prefixr.com) by Jeffrey Way. This tool allows you to write all your CSS using just the standard syntax. When you are finished and happy with your page, you paste your code into the tool, and it generates all the vendor prefixes for you. This is an invaluable resource that will save you lots of time, allowing you to take the basic code you’ve written and extend it to work across all browsers.
css3please.com
Another tool that can assist with the generation of the vendor-specific code is css3please (http://css3please.com). You can use this online editor to specify a given property, and then it automatically updates the other vendor prefixes with the values you have specified. There is a link to copy the code generated to the clipboard, as well as a simple element that will generate a preview of the styles you have specified. Figure 1.1 shows an example of using css3please to generate the necessary code for the border-radius property.
)
Figure 1.1. Dynamically generating all border-radius vendor prefixes with css3please
In terms of best practices, it is always a good idea to pick which browser you will use for testing and then code only to that specific vendor prefix as you develop your page. It is not a good idea to try to insert all of the vendor prefixes right from the beginning, as you will inevitably need to change your code after some testing, and that means regenerating all the vendor prefixes. Thus, I recommend coding just to one browser, and when your code is complete, use Prefixr or css3please to generate the other vendor prefixes, and then test your code in all of the browsers.
Animation Fill Code
Another tool that is specific to keyframe animations is a tool by Louis Lazaris called Animation Fill Code (http://animationfillcode.com). With this online tool, you write keyframe at-rules (more on this in Chapter 4) in one vendor prefix, select which prefix you’re using from a set of radio buttons, and paste in your code. The tool generates the other needed keyframe at-rules for you. You can see this tool in action in Figure 1.2.
)
Figure 1.2. Dynamically generating all keyframe at-rule vendor prefixes with Animation Fill Code
-prefix-free
Another tool for generating vendor prefixes is Lea Verou’s JavaScript library -prefix-free. -prefix-free is a JavaScript CSS processor that adds the required vendor prefixes automatically, based on the browser the visitor is using. You can download the library from http://leaverou.github.com/prefixfree/. You can read Verou’s article describing the library at http://coding.smashingmagazine.com/2011/10/12/prefixfree-break-free-from-css-prefix-hell/.
Tools for Reviewing Browser Support
This book provides detailed information about specific browser support for each feature discussed. For more information on browser support, the best resource is the website http://caniuse.com, which allows you to search or browse by feature and see a matrix of how various features are supported by different browsers and versions. The site is constantly updated and also provides links to relevant articles about the features.
Another worthy site is http://html5please.com. It provides suggestions about whether to use a given feature, and provides information on how fallbacks should be provided. It covers CSS3 features as well as other new HTML5 features that are outside the scope of this book.