:doodle {
@grid: 500x1/ 40vmin;
}
:container {
perspective: 10vmin;
}
@place-cell: center;
@size: 20% 1px;
will-change: transform, opacity;
transform-style: preserve-3d;
background: linear-gradient(to left,
@multi(@p([1-5]), @p(#CC0000, #0011CC, #FFEE00, #ff00BB, #00DD11)),
transparent @r(70%)
);
animation: move @r(1s, 2s, .1) linear infinite;
animation-delay: -@r(.1s, 2s);
--trans:
translateX(50%)
rotateX(@r(-180deg, 360deg))
rotateY(@r(-180deg, 360deg))
rotateZ(@r(-180deg, 360deg));
transform-origin: 0 center;
transform: var(--trans) scale(.5);
opacity: 0;
@keyframes move {
20% { opacity: 1; }
100% { transform: var(--trans) scale(3); }
}
