Colin Sullivan

Some CSS3 Animations

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:

.bingo_marker.disabled {
opacity: 0.4;
background: #BAB49D;
border: none;
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5);
}

CSS

If a marker has been called, it will have an .enabled class on it:

.bingo_marker.enabled {
-webkit-animation-name: bounceEnable;
-webkit-animation-duration: .25s;
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3D4C42), color-stop(0.3, #3D4C42), to(black));
border: 1px solid white;
opacity: 1;
}
 
@-webkit-keyframes 'bounceEnable' {
from {
-webkit-transform: scale(1);
-webkit-animation-timing-function: ease-in-out;
}
33% {
-webkit-transform: scale(1.5);
-webkit-animation-timing-function: ease-in-out;
 
}
66% {
-webkit-transform: scale(.75);
-webkit-animation-timing-function: ease-in-out;
}
75% {
-webkit-transform: scale(1.10);
-webkit-animation-timing-function: ease-in-out;
}
to {
-webkit-transform: scale(1);
-webkit-animation-timing-function: ease-in-out;
}
}

CSS

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:

.bingo_marker.lastEnabled {
background: -webkit-gradient(
linear, 0% 100%, 0% 0%,
from(#FF0000),
color-stop(0.4, #FF0000),
to(#FF7D7F));
-webkit-animation-name: lastEnabled;
-webkit-animation-duration: 2.25s;
-webkit-animation-direction: normal;
-webkit-animation-iteration-count: infinite;
z-index: 102;
}
 
@-webkit-keyframes 'lastEnabled' {
from {
-webkit-transform: scale(1);
}
10% {
-webkit-transform: scale(1.5);
 
}
20% {
-webkit-transform: scale(.75);
}
30% {
-webkit-transform: scale(1.30);
}
to {
-webkit-transform: scale(1);
}
}

CSS

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:

Yellow stripes

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100"> 
<g style="fill-opacity:1;fill: #FFFF00;" transform="rotate(-45 50 50)">
<rect x="-50%" y="-20%" height="5%" width="150%" />
<rect x="-50%" y="-10%" height="5%" width="150%"/>
<rect x="-50%" y="0" height="5%" width="150%"/>
<rect x="-50%" y="10%" height="5%" width="150%"/>
<rect x="-50%" y="20%" height="5%" width="150%"/>
<rect x="-50%" y="30%" height="5%" width="150%"/>
<rect x="-50%" y="40%" height="5%" width="150%"/>
<rect x="-50%" y="50%" height="5%" width="150%"/>
<rect x="-50%" y="60%" height="5%" width="150%"/>
<rect x="-50%" y="70%" height="5%" width="150%"/>
<rect x="-50%" y="80%" height="5%" width="150%"/>
<rect x="-50%" y="90%" height="5%" width="150%"/>
<rect x="-50%" y="100%" height="5%" width="150%"/>
<rect x="-50%" y="110%" height="5%" width="150%"/>
<rect x="-50%" y="120%" height="5%" width="150%"/>
<rect x="-50%" y="130%" height="5%" width="150%"/>
<rect x="-50%" y="140%" height="5%" width="150%"/>
<rect x="-50%" y="150%" height="5%" width="150%"/>
<rect x="-50%" y="160%" height="5%" width="150%"/>
<rect x="-50%" y="170%" height="5%" width="150%"/>
<rect x="-50%" y="180%" height="5%" width="150%"/>
</g>
</svg>

XML

These stripes are then loaded into that "background" element as the background-image:

#last_enabled_background {
background: black;
background-image: url(../svg/stripes.svg);
background-repeat: repeat;
...
}

CSS

Since the bars are already at a diagonal, all I need to do now is move them continuously:

#last_enabled_background {
-webkit-animation-name: moveBorder;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}
@-webkit-keyframes 'moveBorder' {
from {
background-position: 0% 0%;
}
50% {
background-position: 100% 0%;
}
to {
background-position: 0% 0%;
}
}

CSS

Which worked great :)

If anyone feels strongly about the development of the interface for bingo-board.org, please feel free to contact me on GitHub: https://github.com/colinsullivan/bingo-board.