While wandering through the Web, I came across a simple but nice demo of CSS3 Animations:
a spinning newspaper cover like one would see in an old black and white movie. It would be just perfect for a personal website I have but there is one problem: the example uses an image, JPEG to be exact. I want to be able to easily change the text. No problemo… I can just substitute a <div> for the <img> element and then fill that how I want.
To begin, I followed the demo example and used the following CSS:
.newspaper {
animation-name: spinning;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: 1;
animation-direction: normal;
}
@keyframes spinning {
0% {width:10px; height: 7px; transform:rotate(0deg);}
100% {width:468px; height: 330px; transform:rotate(1440deg);}
}
One thing to note is that this CSS won’t actually work in any browser at the moment. Firefox and Webkit based browsers support
CSS3 Animations but only using prefixes (i.e. -moz-, -webkit-). While prototyping and testing in multiple browsers I found it convenient to use the “
-prefix-free” JavaScript code that automatically adds the necessary prefixes (read the documentation about how to use it locally with Chrome and Opera). After you get everything working, you can manually add the prefixes if you need to avoid using JavaScript.
I added a <div> for the newspaper name and immediately came across the first problem. The text doesn’t scale. Following the given example, I adjusted the @keyframe to include “font-size: 0%” and “font-size: 100%”. This didn’t work as expected. The fonts scaled alright, but as they scaled the font size was being rounded to an integer. This lead to discrete jumps in font size which caused visable effects in the text layout.
I have to admit my CSS box-model fu is sadly lacking. I was having trouble getting everything to layout correctly. Later I realized that I had introduced a typo in my CSS style sheet.
<rant>I personally hate how HTML5 has gone the route of allowing errors to go unnoticed. Coming from a programming background, I much prefer that my HTML/CSS crashes and burns when there is a syntax error. I’ve wasted more time trying to understand why something isn’t working the way I think it should only to discover later I was missing a simple colon.
</rant>
Given the frustrations I was having with CSS layout and with the font-sizing problem (which was a show stopper), I decided to try inline SVG for the layout. This worked out suprising well and within a few minutes I had the layout I wanted. (It helped that I was able to recycle some of the CSS classes I had already defined.) I still had a problem with how the animation was working. The transformation origin was moving so the spinning was starting around the top-left corner. At this point I realized that the @keyframes CSS was not optimal. There was no need to change the width, height, and font-size when a scaling could be simply added to the transform. I change the appropriate lines to:
0% { transform:scale(0) rotate(0deg);}
100% { transform:scale(1) rotate(1440deg); }
Now the amination worked as expected.
Once I got the SVG version working, I went back and tackled the CSS/HTML version. It took quite awhile, but I finally got it to look (almost) like the SVG version. Having completed that exercise I can give the following summary:
SVG Advantages:
- Easy layout. No dealing with collapsing margins, shifting borders, paddings, floats, vertical centering hacks. The one problem I came across was that paths must be defined in terms of user units (pixels) and not the percentages that I used everywhere else.
- Easy to add vertical separators of random length.
CSS Advantages:
- SVG does not have text wrapping but one can use a <p> inside <foreignobject>.
- SVG text cannot automatically be vertically centered. Changing font-size requires manually shifting text.
Here are the final figures. Note that these are just PNGs. For a look at the spinning SVG and HTML covers go to my
website (it is too difficult to get these to work inside the blog).
