Got some time this afternoon to work out why the "bouncing text" animation wasn't working in Chrome. Turns out there were two separate issues Chrome/Webit had with attribute values. In particular the attribute values for keyTimes, values and keySplines.
With HTML 5 and CSS 3 you can add animation to your site easily, while the new API's introduced by HTML 5 allow for the creation of full-client side web applications that are dynamic and persistent.
Check out our HTML 5 & CSS training course or our JavaScript course for web application developers.
Chrome/Webkit doesn't like excess white space in svg attribute values
To get simple animateTransform working in Chrome, i.e no calcMode="spline" I had to remove trailng white space at the end of the attribute values.
Chrome Likes : keyTimes="0; 0.5; 1;"
Chrome does not like: keyTimes="0; 0.5 1; "
To be safe I removed all excess white space between parameters used in SVG transformations.
keySplines - Chrome likes space separator Firefox like semi-colon
To get calcMode="spline" woring with animateTransform I had to replace the semi-colons I was using to separate pairs of coordinates for the keySpline attribute with spaces.
Chrome: keySplines=".7 1 1 .9 1 2 1 1"
Firefox: keySplines=".7 1 1 .9; 1 .2 1 1:
I added a simple Chrome browser detection variable based on the user agent string to render the values correctly for Chrome. I figure most other browsers will go with a semi-colon between pairs of coordinate values. Not only is this easier to read it is more in-line with how most technologies accept lists of parameters.
See the Pen Jumping Bean by Mark Clarke (@mxc) on CodePen.
Comments
Experiments in HTML 5 - Part 2.1
This is cool