I recently developed a piece of software for loud italians to use as they play Bingo. I used CSS3 animations in a few different ways and would like to share my findings.
You can read more about the application itself here and here.
Here is a video of the effects as they currently stand. You can see that when a number is called, it animates and then continues to animate until another is called.
Bingo Marker CSS3 Animation
What is happening is pretty awesome. Each "bingo marker" has a .disabled class initially:
If a marker has been called, it will have an .enabled class on it:
The animation here is the quick initial bounce when a number is activated (most visible above when a marker turns from red to black). This is achieved by a simple keyframe animation on the scale attribute of the element. Before I discovered scale, I tried animating all of the attributes including font-size a while back which didn't work out so well.
The last animation that is visible in the video is the long, repeating bounce for whichever marker is the last enabled. For this, like all of the above animations, I just add a class, lastEnabled:
As you can see, this class merely changes the color of the marker and begins a repeating animation, once again on the scale attribute.
Another animation that I experimented with, but ended up removing, was the following:
Unused CSS3 Background Trick
This effect was quite fun to figure out how to achieve, although it may not look all that pleasing. I wanted to figure out how to move that "caution tape" looking background without using any images. In order to create the "caution tape" look, I wrote a little SVG that generates these diagonal stripes:
These stripes are then loaded into that "background" element as the background-image:
Since the bars are already at a diagonal, all I need to do now is move them continuously: