CodePen Embed - Staggered animation with custom properties

<div class="el"></div>
<div class="el"></div>
<div class="el"></div>

.el {
  --delay: calc(var(--i, 1) * 400ms);
	animation: fadeIn 1000ms var(--delay) forwards;
	width: 100px;
	height: 100px;
	background: darkorchid;
	margin: 20px;
	opacity: 0;
}

.el:nth-child(2) {
  --i: 2;
}

.el:nth-child(3) {
  --i: 3;
}

@keyframes fadeIn {
	100% { opacity: 1; }
}

This Pen is owned by Michelle Barker on CodePen.

See more by @michellebarker on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.