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