On the screen: four text boxes cycling through rainbow color backgrounds and spinning wildly in circles.

Manager walks in.

Here's the context.

We were pair programming and working on a simple form. We were just finishing up the style, and I suggested we use a CSS3 animation to make the invalid fields pulsate a light red once.

I'm the young guy in the office, so I am most familiar with the "new" front end stuff like flex and CSS3.

My colleague was unfamiliar with CSS3 animations, so I implemented the red flash quickly and showed him.

He was curious what else you could do with CSS3 animations, so I changed my "to/ from" to a "0%/ 25%/ 75%/ 100%" style animation to show how keyframes worked. Then I made the animation iterations infinite so it went on forever. Of course, I didn't have any normal colors on hand so I just went with my debug colors: red, green, blue, yellow, etc.

We submitted the form with invalid inputs and sure enough, they flashed rainbow colors. It looked pretty funny so I thought "haha, lets quickly add rotation while we're at it"

That's the point where the education turned to a little fun but it wasn't going to take more than a second.

So we did it and it looked pretty funny and it actually made me laugh. Then we started discussing next steps on the form (back-end). Discussion lasted maybe five minutes before our manager visited to update us.

As we were discussing, the invalid controls were still spinning and rainbow colored in the background. Whoops.

The words we managed to say were just "It's invalid" and then we broke out laughing.

Add Comment