:doodle {
@grid: 300x1 / 100vmax;
}
:container {
perspective: 30vmin;
}
@place-cell: center;
@size: 60% 2px;
will-change: transform, opacity;
transform-style: preserve-3d;
background: linear-gradient(to left,
@multi(@p([2-5]), @p(#00b8a9, #f8f3d4, #f6416c, #ffde7d, #ffffff)),
transparent @r(40%)
);
animation: move @r(1s, 2s, .1) linear infinite;
animation-delay: -@r(.1s, 2s);
--trans:
translateX(50%)
rotateX(@r(-90deg, 90deg))
rotateY(@r(-90deg, 90deg))
rotateZ(@r(-180deg, 180deg));
transform-origin: 0 center;
transform: var(--trans) scale(1.2);
opacity: 0.5;
@keyframes move {
10% { opacity: 1; }
100% { transform: var(--trans) scale(0); }
}
