A while back I completed an excercise to implement Conways Game of Life using Javascript. I have recently found a play by play on Pluralsight where Lea Verou did the same thing. I was especially interested, because Lea also chose to represent her grid using checkboxes. Although Lea’s implementation is undoubtably better I was, overall, happy with my own attempt, but one thing she did looked really good to me. Lea added a simple animation when the checked property changed to represent “birth”, so I’ve decided to shamelessly borrow this idea and to extend it to include an animation for “death” too.
The main change to the css is to add the keyframes declarations for “birth” and “death” and to add them as animations to the checkboxes.
@-webkit-keyframes birth {
0% {
box-shadow: 0 0 0 99px white inset;
}
50% {
box-shadow: 0 0 0 99px green inset;
}
}
@keyframes birth {
0% {
box-shadow: 0 0 0 99px white inset;
}
50% {
box-shadow: 0 0 0 99px green inset;
}
}
.conway-game input[type="checkbox"]:checked {
box-shadow: 0 0 0 99px black inset;
-webkit-animation: birth 500ms;
animation: birth 500ms;
}
@-webkit-keyframes death {
0% {
box-shadow: 0 0 0 99px black inset;
}
50% {
box-shadow: 0 0 0 99px red inset;
}
}
@keyframes death {
0% {
box-shadow: 0 0 0 99px black inset;
}
50% {
box-shadow: 0 0 0 99px red inset;
}
}
.conway-game input[type="checkbox"] {
box-shadow: 0 0 0 99px white inset;
-webkit-animation: death 500ms;
animation: death 500ms;
}
And here is the updated game…