<svg viewBox="-80 -80 160 160" xmlns="http://www.w3.org/2000/svg">
<style>
polygon {
fill: lime;
stroke: green;
stroke-width: 4px;
animation: linear infinite both moveCross 1s var(--delay);
}
@keyframes moveCross {
0% {
transform: translate(var(--x-off), 99px) scale(1);
}
40% {
transform: translate(var(--x-off), 0) scale(0);
}
100% {
transform: translate(var(--x-off), 0) scale(0);
}
}
</style>
<defs>
<polygon id="cross" points="-5,-15, 5,-15, 5,-5, 15,-5, 15,5, 5,5, 5,15, -5,15, -5,5, -15,5, -15,-5, -5,-5" />
</defs>
<!-- twice as many crosses for moves stronger than Wait, like Rejuvenate? -->
<use href="#cross" style="--x-off: -61.0px; --delay: 0.00s;"/>
<use href="#cross" style="--x-off: 30.5px; --delay: 0.15s;"/>
<use href="#cross" style="--x-off: -30.5px; --delay: 0.30s;"/>
<use href="#cross" style="--x-off: 61.0px; --delay: 0.45s;"/>
<use href="#cross" style="--x-off: 0.0px; --delay: 0.60s;"/>
</svg>