CSS: animating text color

Question:


I’m working on a website and trying to animate the color’s text so it can go from #c7ede6 to black in a gradient or from transparent to black


Repl link:

code snippet

h1{
  text-align:center;
  font-family: Cochin ;
  color: from #c7ede6 to black;

Welcome to the Replit Ask forums!

One way to achieve this is through a keyframe animation:

h1 {
  text-align: center;
  font-family: Cochin;
  animation: color-animation 3s infinite;
}

@keyframes color-animation {
  0%, 100% { color: #c7ede6; }
  50% { color: #000000; }
}
4 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.