:doodle { @grid: 80x1/ 40vmin; perspective: 5vmin; } @place-cell: center; @size: 60% 1px; will-change: transform, opacity; transform-style: preserve-3d; background: linear-gradient(to left, @multi(@p([2-4]), @p(#4EF4D4, #E6FF29, #FF9BC9, #FFD855)), transparent @r(50%) ); animation: move @r(5.5s, 2s, .1) linear infinite reverse; 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: 1; } 100% { transform: var(--trans) scale(0); } }