페이퍼 폴드

<div class="foldwrap"><div class="strip" id="strip"></div></div>

.foldwrap{perspective:700px;width:70%;height:62%}
.strip{display:flex;width:100%;height:100%;transform-style:preserve-3d}
.seg{flex:1;transform-origin:left center;display:flex;align-items:center;justify-content:center;
  font:700 20px/1 sans-serif;color:#fff;animation:fold 3.4s ease-in-out infinite}
.seg:nth-child(1){background:var(--accent)}
.seg:nth-child(2){background:var(--accent-2);animation-name:foldRev}
.seg:nth-child(3){background:var(--accent-3)}
.seg:nth-child(4){background:var(--accent);animation-name:foldRev}
@keyframes fold{0%,100%{transform:rotateY(0deg)}50%{transform:rotateY(-130deg)}}
@keyframes foldRev{0%,100%{transform:rotateY(0deg)}50%{transform:rotateY(130deg)}}

const strip = document.getElementById('strip');
for (let i = 0; i < 4; i++) {
  const s = document.createElement('div');
  s.className = 'seg';
  s.style.animationDelay = (i * 40) + 'ms';
  strip.appendChild(s);
}