Motion Inversion - CSS Optical Illusions

Motion Note: this illustration moves, and could cause dizziness, nausea, or headache in sensitive viewers. To view it click on the "Live Demo" button below. If you experience any discomfort, please stop viewing the illusion and consider taking a break.

Code Live Demo

Open fullscreen view

@keyframes move {
  0% { background-position: 0 0; }
  100% { background-position: -15vmin 0; }
}

:root {
  background: #ccc;
  margin: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 4vmin;
  
  &::before, &::after {
    content: "";
    width: 60vmin;
    height: 15vmin;
    display: block;
    background: 
      linear-gradient(90deg, #fff, #777 20% 30%, #fff 50%, #000 0, #777 70% 80%, #000) 0 0 / 15vmin 100%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    animation: move 0.75s linear infinite;
  }

  &::after {
    animation-timing-function: steps(4,end);
  }
}

About This Illusion

These two illustrations are identical - same shapes, same animation. The only difference is the CSS timing function.

The top animation moves smoothly from right to left. The bottom one appears to move choppily in the same direction, but if you focus on it, it may suddenly seem to reverse direction and move faster.

Try This

It may take some concentration but you can do it!