Keyframes animation

Question

Is there a way I could simplify this with Sass or JS? It works, but it's not what I'd call 'DRY' code. An alternate form I've tried is a Sass for loop but can't get it to work.

h1 {
 margin-top: 10px;
 opacity: 1;
 color: black;
 font-size: 55px;
 -webkit-background-clip: text;
 text-shadow: 1px 1px 5px rgb(167, 167, 167);
 animation: fill 1s;
}
@keyframes fill {
	0% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0);
	}
	2.5% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.025);
	}
	5% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.05);
	}
	7.5% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.075);
	}
	10% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.1);
	}
	12.5% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.125);
	}
	15% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.15);
	}
	17.5% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.175);
	}
	20% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.2);
	}
	22.5% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.225);
	}
	25% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.25);
	}
	27.5% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.275);
	}
	30% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.3);
	}
	32.5% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.325);
	}
	35% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.35);
	}
	37.5% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.375);
	}
	40% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.4);
	}
	42.5% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.425);
	}
	45% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.45);
	}
	47.5% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.475);
	}
	50% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.5);
	}
	52.5% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.525);
	}
	55% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.55);
	}
	57.5% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.575);
	}
	60% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.6);
	}
	62.5% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.625);
	}
	65% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.65);
	}
	67.5% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.675);
	}
	70% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.7);
	}
	72.5% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.725);
	}
	75% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.75);
	}
	77.5% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.775);
	}
	80% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.8);
	}
	82.5% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.825);
	}
	85% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.85);
	}
	87.5% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.875);
	}
	90% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.9);
	}
	92.5% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.925);
	}
	95% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.95);
	}
	97.5% {
		-webkit-text-fill-color: rgba(0, 0, 0, 0.975);
	}
	100% {
		-webkit-text-fill-color: rgba(0, 0, 0, 1);
	}
}

<h1>This Is A Test</h1>

Answer 1

I think, I would make a special class for the style instead of having it as a style for all h1's.

You can IMO simplify the keyframes quite a bit in the following way:

.fade-in {
 margin-top: 10px;
 opacity: 1;
 color: rgba(0, 0, 0, 1);
 font-size: 55px;
 -webkit-background-clip: text;
 text-shadow: 1px 1px 5px rgb(167, 167, 167);
 animation-timing-function: steps(50, end);
 animation: fill 2s;
}
@keyframes fill {
 0% {
 color: rgba(0, 0, 0, 0.1);
 }
}

<h1 class="fade-in">This Is A Test</h1>

When I test it on my computer it seems to be the same effect.

-webkit-text-fill-color isn't standard, so I wouldn't rely on using it at all.

• Dan Knights: Good thinking. I knew there was a better way!