CODEWITHSUNDEEP
htmlcssanimation
TMH
TMH

Reputation: 6246

Is it possible to animate -webkit-text-fill-color?

I'm trying to animate some text

h1 {
    font-family: sans-serif;
	color: black;
	animation: danger-zone 3s linear infinite;
	animation-direction:  alternate;
    font-size:60px;
  
	-webkit-text-stroke-width: 2px;
}

@keyframes danger-zone {
	0% {

		-webkit-text-fill-color: black;
		-webkit-text-stroke-color: black;
	}

	100% {
		
		-webkit-text-fill-color: white;
		-webkit-text-stroke-color: white;
	}
}
<h1>Here's a title!</h1>

For some reason only the stroke appears to be animating, and the fill colour just switches at (I'm guessing) 50%. Is it possible to animate the fill colour in just CSS?

EDIT: It appears to work in Firefox, not Chrome. Gonna test some other browsers now

Upvotes: 1

Views: 828

Answers (1)

AlexG
AlexG

Reputation: 5919

It seems that chrome doesnt like the -color suffix, try this:

h1 {
  font-family: sans-serif;
  color: black;
  animation: danger-zone 3s linear infinite;
  animation-direction: alternate;
  font-size: 60px;
  -webkit-text-stroke-width: 2px;
}
@keyframes danger-zone {
  0% {
    color: black;
    -webkit-text-stroke: 2px black;
  }
  100% {
    color: white;
    -webkit-text-stroke: 2px white;
  }
}
<h1>Here's a title!</h1>

Upvotes: 1

Related Questions