<main>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div class="cover"></div>
</main>
<button id="go">Play/Pause</button>
:root {
--pixel: 5vw;
--cover: black;
--duration: 2500ms;
--covered: calc(var(--pixel) * 5); /*5 frames, 4 covered at a time */
--space: white; /* will cause transparency when mix blend mode multiply */
--w: 100vw;
--h: calc(100vh - 3rem);
--direction: normal;
--blend: multiply;
}
main div {
width: var(--pixel);
background-image: linear-gradient(to bottom, hsl(var(--hue, 183), 100%, 52%) 80%, transparent 80%);
display: flex;
justify-content: center;
align-items: flex-end;
padding-bottom: .5rem;
color: #373737;
}
main div:nth-of-type(5n + 2) {
--hue: 255;
}
main div:nth-of-type(5n + 3) {
--hue: 327;
}
main div:nth-of-type(5n + 4) {
--hue: 39;
}
main div:nth-of-type(5n + 5) {
--hue: 111;
}
.no-animation {
--show: paused;
}
/*the sliding cover that triggers the motion illusion */
.cover {
left: -25vw;
width: 150vw;
background:
linear-gradient(to right,
transparent 0px, transparent 20%,
var(--cover) 20%,
var(--cover) 100%);
background-size: 25vw 100%;
will-change: transform;
transform: translateY(-50%) translateX(0px);
animation: slide var(--duration) infinite var(--direction) steps(5);
animation-play-state: var(--show, running);
position: absolute;
top: 0;
bottom: 0;
}
@keyframes slide {
100% {
transform: translateY(-50%) translateX(var(--covered));
}
}
main {
width: var(--w);
height: var(--h);
position: relative;
overflow: hidden;
display: flex;
}
*, *::after {
box-sizing: border-box;
}
body {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: hsl(203, 50%, 98%);
margin: 0;
overflow: hidden;
overflow-y: scroll;
font-family: system-ui, 'Segoe UI', sans-serif
}
button {
appearance: none;
background: transparent;
border: .1rem solid currentColor;
margin-top:.5rem;
padding: .5rem 1rem;
font-size: 1rem;
background: hsl(203, 50%, 94%);
}
document.getElementById('go').addEventListener('click', function() {
document.documentElement.classList.toggle('no-animation');
})
Also see: Tab Triggers