How to use CSS3 animations and effects
A guide explaining how to use new CSS3 animations and effects
CSS3 animations are a very efficient way to add effects to your charts. Browser support is good (Chrome, Firefox, Opera, Safari, IE10+) and there are a lot of effects available. You can chain the effects by setting two to run sequentially.
The CSS3 effects library is available in the css/ folder of the download archive and it is authored by Daniel Eden.
1. Include the CSS3 animations file.
Including the CSS3 file is a simple matter of adding a tag to your page header.
<link rel="stylesheet" href="animations.css" type="text/css" media="screen" />
The animate.css file is quite large (over 60k) so if you only use certain effects from it you can take those effects out of the file and put them in your own CSS file. The front page of this website does this and, gzipped, the CSS that's necessary for the effect thats used (a modified bounceIn effect) comes in at roughly 320 bytes (!).
2. Add the relevant CSS class to your canvas tag
This is just a case of adding a class="" attribute to your canvas tag.
<canvas id="cvs" width="600" height="250" class="animated rotateIn">[No canvas support]</canvas>
There's a blog article here that shows you how you can combine effects by delaying the second effect - allowing the first to finish.
Using CSS3 animations with the textAccessible option
If you're using CSS effects with the textAccessible option then you need to add the relevant CSS class to a wrapper DIV like the code shown here:
<div style="display: inline-block; width: 600px; height: 250px" class="animated rotateIn"> <canvas width="600" height="250" id="cvs">[No canvas support]</canvas> </div>
<script> var div = document.getElementById('cvs').parentNode; div.className = ''; div.className = 'animated hinge'; </script>
Note about using window.onload with animations
Also, as a general rule, the jQuery ready event (which utlises the underlying standard DOMContentLoaded event) will result in your charts being displayed quicker than the window.onload event.