- let n = 16;

mixin row(n = 16)
	.wrap(style=`--n: ${n}`)
		- for(let i = 0; i < n; i++)
			.item(style=`--i: ${i}`)

p <code>animation-fill-mode: backwards</code>, positive delays:
+row

p No <code>animation-fill-mode</code> set, negative delays:
+row
View Compiled
$r: 2.5vw;
$t: 2s;

.wrap {
	display: flex;
	justify-content: space-evenly;
}

.item {
	--m: calc(.5*(var(--n) - 1));
	--abs: max(var(--m) - var(--i), var(--i) - var(--m));
	padding: $r;
	animation: a $t infinite;
	animation-name: grow, melt;
	animation-delay: calc(var(--abs)/var(--m)*#{$t});
	
	.wrap:nth-of-type(1) & {
		animation-fill-mode: backwards
	}
	
	.wrap:nth-of-type(2) & {
		animation-delay: calc((var(--abs)/var(--m) - 1)*#{$t})
	}
}

@keyframes grow {
	0% { transform: scale(0) }
	50%, 100% { transform: none }
}

@keyframes melt {
	0%, 50% { box-shadow: inset 0 0 0 $r }
	100% { box-shadow: inset 0 0 }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.