Tom Hart Tom Hart - 11 days ago 4
CSS Question

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

Answer

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>

Comments