Question

我试图动画一些文字

＆＃13;

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;
	}
}

＆＃13;

<h1>Here's a title!</h1>

＆＃13;

出于某种原因，只有笔划似乎是动画，填充颜色只是切换（我猜测）50％。是否可以在CSS中为填充颜色设置动画？

编辑：它似乎适用于Firefox，而非Chrome。现在要测试其他一些浏览器

Answer 1

看起来chrome不喜欢-color后缀，试试这个：

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>

是否可以动画-webkit-text-fill-color？

1 个答案: