Текстовая тень не отображается в Chrome

Question

Код ниже работает в Firefox.

Но в Chrome, text-shadow не отображается. По крайней мере для меня.

#site-title{
  background-color: darkslateblue;
	font-size: 35px;
	display: block;
	animation-name: titleAnimation;
	animation-duration: 2s;
  animation-iteration-count: infinite;
	animation-direction: alternate;
}

@keyframes titleAnimation { 
	from { 
		border-radius: 30px;
		box-shadow: 0px 0px 0px dodgerblue;
		text-shadow: 0px 0px 0px yellow;
	} 
	to { 
		border-radius: 30px;
		box-shadow: 0px 0px 40px dodgerblue;
		text-shadow: 0px 0px 30px yellow;

	} 
} 

<center><h1 id="site-title">THIS IS A TEST</h1></center>

Код работает здесь на StackOvervlow, используя Chrome, но не на мой блог

Любая помощь приветствуется - Спасибо.

Answer 1

он не работает в вашем блоге, потому что вы применяете анимацию к родительскому элементу тега привязки вместо самого тега.

используйте следующий код:

#site-title a{
  background-color: darkslateblue;
    font-size: 35px;
    display: block;
    animation-name: titleAnimation;
    animation-duration: 2s;
  animation-iteration-count: infinite;
    animation-direction: alternate;
}

Затем очистите свой код, у вас есть повторения #site-title в строках 420 и 68.