A CodePen by Leon Coto. Second Cube - Infinite sequences

The faces of the cube are represented by an infinite object sequence, which contains five diferent objects:

floor
left
back
right
front

Each one of these objects sets its own state, and has the ability to return the next object in the sequence. The relevant difference in each object's state is the class name that will be assigned to the rendered DOM element, which is used as a CSS hook for animation and syling.

CSS animations and transitions

Since each face of the cube represents a known state, it is possible to create specific animation for each face. Every animation will run only once, and is determined by the state provided by each object in the above mentined sequence.