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.
@property --size {
syntax: '<length>';
inherits: true;
initial-value: 10vmin;
}
@keyframes move {
0% { translate: -100% -50% }
100% { translate: 100vw -50%; }
}
:root {
--size: 10vmin;
margin: 0;
height: 100vh;
overflow: hidden;
position: relative;
background: #666;
&::after {
content: "";
position: absolute;
width: calc(var(--size) * 1.1);
height: calc(var(--size) * 2.6);
background: linear-gradient(#ff0 18%, #0000 0 82%, #006 0);
animation: move 15s linear infinite;
top: 50%;
}
&::before {
content: "";
position: absolute;
inset: 0;
width: 100%;
background: repeating-linear-gradient(90deg, #000 0 calc(var(--size) / 4), #fff 0 calc(var(--size) / 2)) 0 0 / 100% 100% no-repeat, #666;
}
}
About This Illusion
It may look like the boxes are moving at different speeds or like a set of walking feet. In reality, all elements move at the same pace and in parallel. Mouse over the demo to reveal the effect.
Try This
- Mouse over the demo to see the illusion in action.