Published on
placeholder Infinite tunnel preview

A lot of interesting infinite patterns in CSS animations can be obtained from the one idea. This pen is an example of it. The animation consists of two steps with simple transforms. There are no rare properties or magic behavior in the example.

The idea is very simple: take a number of small elements, put them into the one big element and rotate it. After that we can move the small elements in any direction and it will look like we have the infinite number of the elements. But it’s not the truth. The number of the elements is finite. There are only six blocks per wall in this pen.

See the Pen Infinite Tunnel (Pure CSS Animation) by Ivan Bogachev (@sfi0zy) on CodePen.

Related posts

Pet projects

placeholder Muilessium preview
16  2  10k+

Simple UI framework. RSCSS, REM-based sizes, fluid typography and other nice ideas. This website is powered by it.