:doodle { @grid: 12 / 50vmin 80vmin; perspective: 90vmin; perspective-origin: 0% -140%; transform: scale(.6); } :container { transform-style: preserve-3d; animation: camera 5s ease-in-out infinite; animation-direction: alternate-reverse; } --ds: @r(1.5s, 6s, .1); --size: @r(1, 9); /* Thanks to mootari for the tip */ --z: calc(@i() * .0001px + var(--size) * .1px); animation: move var(--ds) linear infinite, opacity var(--ds) linear infinite; animation-delay: calc((@row() - @size-row()) * var(--ds) / @size-row() - @r(@size()) * .1s); :after { content: ''; @size: calc(var(--size) * 10%); background: @p(#00b8a9, #f8f3d4, #f6416c, #ffde7d); } position: absolute; left: calc(@col() * 100% / @size-row()); @size: calc(100% / @size-row()); @keyframes move { 0% { transform: translate3d(0, 0, calc(var(--z) - 15vmin)) rotateX(180deg) scaleY(.01); } 10% { transform: translate3d(0, calc(10% * @size-row()), var(--z)) rotateX(0) scaleY(.8); } 90% { transform: translate3d(0, calc(90% * @size-row()), var(--z)) scale(1); } 100% { transform: translate3d(0, calc(100% * @size-row()), calc(var(--z) + 5vmin)) scale(.5); } } @keyframes opacity { 0%, 100% { opacity: 0; } 10%, 90% { opacity: .9; } } @keyframes camera { from { transform: rotateX(-45deg) rotate(140deg) translateY(-10%); } to { transform: rotateX(-45deg) rotate(220deg) translateY(-10%); } }
Made on
Tilda