:doodle { @grid: 10x1 / 40vmin; perspective: 100vmin; } background: @multi(@r(400, 100), ( radial-gradient( @p(#339989, #7DE2D1, #A0E9DD) 30%, transparent 50% ) @r(100%) @r(100%) / @r(1%, 3%, .1) @lr() no-repeat )); @size: 100%; @place-cell: center; opacity: 0; border-radius: 50%; transform-style: preserve-3d; animation: scale-up 60s linear infinite; animation-delay: calc(@i() * .4s); animation-fill-mode: forwards; @keyframes scale-up { 0% { opacity: 0; transform: translate3d(0, 0, @r(100vmin, 0vmin)) rotate(@r(200deg, 600deg)); } 1%{ opacity: .5; } 10% { opacity: 1; transform: translate3d(0, 0, 0vmin); } 60%{ opacity: .4; transform: translate3d(0, 0, @r(20vmin, 0vmin)) rotate(@r(400deg, 1200deg)); } 100%{ opacity: 0; transform: translate3d(0, 0, @r(100vmin, 0vmin)) } }