My experience with the code below is that it functions properly in Firefox.
However, when I try to view it in Chrome, the text-shadow feature does not seem to be rendered. At least this was the case for me.
#site-title{
background-color: darkslateblue;
font-size: 35px;
display: block;
animation-name: titleAnimation;
<mark>animation-duration:</mark> 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>Interestingly enough, the code works just fine here on StackOverflow using Chrome, but it's a different story on my personal blog
If anyone has any insight or suggestions on how to resolve this issue, your help would be greatly appreciated. Thank you.