Tesla Lab

Animations in CSS 3, Pong

In our most recent course of HTML 5, which we taught at the USC (University of Santiago de Compostela), we challenged our students, which was the realization of an animation in CSS 3, based on what we had explained in class.

The result was to our unbeatable feeling, with works of an enormous quality.

The animation that we leave today was made by Hadriana Rodríguez Castiñeira and Lucia González Bravo, and then I leave the description of the animation that we have been provided and a little information about them.

About the animation

Recalling the famous video game of first generation known by the name of Pong (Atari, 1972). We present a small animation made using CSS3 that simulates this popular computer game.

As you can see, the animation is based on the movements of the ball and the two bars. The movements were calculated automatically from a program in C. This program calculates the position of the ball and both bars according to their initial position and the angle that marks the movement of the ball with the Y axis.

The marker consists of several layers that gradually disappear or appear. The letters of the end rotate on themselves to give a dynamic effect.

About the authors

As for us, we are students of last year of the Degree in Computer Engineering, in Santiago de Compostela. We are Hadriana and Lucia, and through our little animation we intend to show you the applicability of new technologies, such as HTML5 and CSS3, about classics as popular as Pong.