4
\$\begingroup\$

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>

\$\endgroup\$
0
5
\$\begingroup\$

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.

\$\endgroup\$
1
  • 1
    \$\begingroup\$ Good thinking. I knew there was a better way! \$\endgroup\$ – Daniel_Knights Jun 12 '20 at 7:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.