:doodle {
@grid: 180x1 / 37vmin;
transform-style: preserve-3d;
animation: rd 18s linear infinite;
will-change: transform;
}
@place-cell: center;
@size: 100% 1vmin;
border-radius: 50%;
will-change: transform, opacity;
transform-style: preserve-3d;
background: linear-gradient(to right,
@multi(4, @pd(#00b8a9, #f8f3d4, #f6416c, #ffde7d)),
transparent 50%
);
animation: cycle @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 cycle {
20% { opacity: 1; }
100% { transform: var(--trans) scale(0); }
}
@keyframes rd {
to { transform:
rotateX(@p(-1turn, 1turn))
rotateY(@p(-2turn, 2turn))
rotateZ(@p(-1turn, 1turn))
}
}