Pure CSS Scenes & objects #loop

Infinite tunnel in pure CSS

Identical frames fly from far away to past the camera on staggered negative delays.

30 lines of CSS
12 lines of HTML
No JavaScript
No dependencies
Snippet under MIT

GitHub

How it works

Ten identical frames, stacked in the centre, all running the same animation: from 1400 units behind the screen (translateZ −1400) to 200 units in front of it.
Perspective is 320 units. A frame at z = 200 is already magnified 2.7× and off-screen, so stop there and fade out. Never animate all the way to z = perspective: the scale there is infinite and the browser stalls rasterising it.
A negative animation-delay of i × (duration / count) spreads them evenly along the tunnel.
Fading in from 0 opacity hides the moment a frame pops into existence far away.
The tunnel is inset: 0, so it fills the canvas edge to edge. Its lengths are multiples of one base unit, --u, tied to the canvas, so a frame is the same share of a gallery card and of a full screen.

Key techniques

animated translateZ
negative animation-delay
opacity fade-in at distance

HTML 12 lines

<div class="tunnel">
  <i style="--i:0"></i>
  <i style="--i:1"></i>
  <i style="--i:2"></i>
  <i style="--i:3"></i>
  <i style="--i:4"></i>
  <i style="--i:5"></i>
  <i style="--i:6"></i>
  <i style="--i:7"></i>
  <i style="--i:8"></i>
  <i style="--i:9"></i>
</div>

CSS 30 lines

.tunnel {
  /* one base unit, tied to the canvas; the tunnel itself fills the canvas edge to edge */
  --u: 0.33vmin;
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  perspective: calc(320 * var(--u));
  background: radial-gradient(circle, #1b0f3a, #05030d 70%);
}

.tunnel i {
  box-sizing: content-box; /* a frame is its opening, its border drawn outside it: by design, on any page */
  position: absolute;
  width: calc(260 * var(--u));
  height: calc(260 * var(--u));
  border: calc(3 * var(--u)) solid hsl(calc(260 + var(--i) * 14) 90% 65%);
  border-radius: calc(18 * var(--u));
  box-shadow: 0 0 calc(18 * var(--u)) hsl(calc(260 + var(--i) * 14) 90% 65% / 0.7);
  animation: fly 4s linear infinite;
  animation-delay: calc(var(--i) * -0.4s);   /* 4s / 10 frames */
}

/* stop well before z = perspective (320 units): the scale there is infinite */
@keyframes fly {
  from     { opacity: 0; transform: translateZ(calc(-1400 * var(--u))) rotateZ(0deg); }
  25%, 85% { opacity: 1; }
  to       { opacity: 0; transform: translateZ(calc(200 * var(--u))) rotateZ(90deg); }
}

Standalone snippet · plain CSS, no build step, no dependencies.

More scenes & objects

Scenes & objects

Solar system
Pure CSS

Orbits are rings on a tilted plane, each spinning at its own speed. Every planet undoes both rotations, so it always faces the camera.

#loop #space #billboard #orbit Learn & copy
Move pointerTouch & move
Scenes & objects

Isometric city
CSS + JS

Sixteen buildings on a ground plane. Each one is a single element: the roof is lifted by translateZ and two pseudo-element walls hang down from it. The pointer turns the block.

#pointer #isometric #scene #building Learn & copy
Scenes & objects

Ferris wheel
Pure CSS

The wheel turns on Z while every cabin turns the other way by the same amount, so the cabins stay upright. Two rims at different depths give it thickness.

#loop #scene #wheel Learn & copy
Scenes & objects

Floating island
Pure CSS

A small terrain of block columns in an isometric view. Each block is one element: its top is lifted with translateZ and two pseudo-element walls hang from its edges.

#loop #isometric #scene #voxel Learn & copy
Scenes & objects

Synthwave floor
Pure CSS

A gradient-drawn grid laid flat with rotateX, scrolling toward you forever.

#loop Learn & copy
Scenes & objects

Warp starfield
Pure CSS

Each layer is ONE element; its stars are box-shadows of it, written out as one list.

#loop #generated Learn & copy
Move pointerTouch & move
Scenes & objects

Depth parallax
CSS + JS

Layers sit at different translateZ depths; tilting the scene with the pointer makes them slide apart.

#pointer Learn & copy
HoverTap
Scenes & objects

Door
Pure CSS

Hover or focus to open. The light behind is just the frame’s background.

#hover Learn & copy
Scenes & objects

Laptop lid
Pure CSS

The lid hinges on the back edge. Its two sides are separate faces: shell and screen.

#loop Learn & copy
Scenes & objects

Hanging sign
Pure CSS

A pendulum is just rotateX around the top edge with an ease-in-out alternate.

#loop Learn & copy
Scenes & objects

Folding map
Pure CSS

Nested panels, each hinged on its parent’s edge, folding up like a paper map.

#loop Learn & copy
HoverTap
Scenes & objects

Hover tiles
Pure CSS

Sweep across the floor. Tiles rise instantly and sink slowly, leaving a trail.

#hover Learn & copy
ClickTap
Scenes & objects

Confetti burst
CSS + JS

Click anywhere on the canvas and the confetti bursts from that very point. JS gives each piece a random 3D vector in per cent of the canvas, and one CSS animation flies them all out to its edges.

#generated #pointer Learn & copy
Move pointerTouch & move
Scenes & objects

Look around a room
CSS + JS

A box seen from the inside: floor, ceiling and three walls. The pointer rotates it around the camera position, so it feels like turning your head.

#pointer #scene #interior Learn & copy
Scenes & objects

Endless drive
Pure CSS

A road plane laid flat with rotateX(90deg). The centre line slides by exactly one dash period, and posts travel the whole road with staggered delays, so the loop never shows a seam.

#loop #scene #road #synthwave Learn & copy
Scenes & objects

Depth snowfall
CSS + JS

JS creates forty flakes once, each with a random depth, speed and drift in custom properties. One CSS animation does the falling; perspective makes near flakes big and fast.

#generated #loop #particles #scene #weather Learn & copy
Scenes & objects

Map pins
Pure CSS

A map drawn with gradients lies on a tilted plane. The pins undo the plane’s rotation around their tip, so they stand up and face you, then bounce in turn above a pulsing ring.

#loop #map #pin #billboard #scene Learn & copy
Scenes & objects

Windmill
Pure CSS

A tapered tower of four leaning trapezoids with a pyramid cap, on a grass block. The sails turn with one rotateZ loop while the whole model turns slowly, so the depth reads.

#loop #scene #building Learn & copy
Scenes & objects

Rocket launch
Pure CSS

A rocket built from strips and leaning triangles fills the frame on its pad, lifts off in a cloud of smoke and climbs out of the top of the frame, the camera following it up as the ground drops away. Then the camera pans back down to the pad, where the next rocket stands ready, so the loop has no seam. Flame and smoke are gradient layers that only scale and fade.

#loop #scene #space #cylinder Learn & copy
Scenes & objects

Lighthouse
Pure CSS

A striped tower of leaning strips on a rock in a night sea. Two long translucent planes, crossed, make each light beam; they sweep round with rotateY while a lit wedge on the water turns with them.

#loop #scene #building #night Learn & copy
Scenes & objects

Model train
Pure CSS

A toy locomotive and two wagons circle a tree on a round track. The ground is one tilted plane; the train rides a carrier that turns about the track centre, so the boxes face along the rails and stay upright with nothing to undo.

#loop #scene #train #toy #track Learn & copy
Scenes & objects

Campfire
Pure CSS

A loose pile of logs leaning into a teepee, charred and glowing at the burned ends, on a bed of ash and coals in a ring of odd stones, with flame tongues flickering out of step and embers drifting up as the ground turns slowly. Every log is a real box placed by its own custom properties, and every flame tongue is crossed planes, so the fire has volume from every side.

#loop #scene #fire #camping Learn & copy
Scenes & objects

Hot-air balloon
Pure CSS

A striped balloon bobbing and turning slowly on its ropes, with a woven basket and clouds drifting past in front of it and behind it. Each of its twelve gores is six flat panels, each tilted to follow the balloon’s outline, so the silhouette is round from every side as the stripes go by.

#loop #scene #balloon #sky Learn & copy
Scenes & objects

Aquarium
Pure CSS

A glass fish tank seen from a little above: tinted walls with water up to a bright surface line, a sand bed, swaying plants and rising bubbles. Four CSS-drawn fish swim racetrack loops round the tank, turning at the ends and passing in front of and behind each other, each loop one keyframe list of translateX, rotateY and translateZ.

#loop #scene #fish #water Learn & copy
Scenes & objects

Black hole
Pure CSS

A black hole with its accretion disk swirling round it, nearly edge on: the near half of the disk crosses in front of the dark centre, the far half goes behind it, and gravity bends the far side up over the top and down under the bottom as a glowing halo. The side turning toward you burns brighter.

#loop #space #scene #gradient Learn & copy

Synthwave floor Warp starfield

How it works

Key techniques

Copy-paste code

HTML 12 lines

CSS 30 lines

More scenes & objects