#-webkit-keyframe animation "content" isn't working in Safari and iOS - safari

Question

Problem
Having trouble getting CSS #-webkit-keyframe animations to work with the content-tag. The following code works great on Chrome and Firefox, but Safari doesn't shows still “STRING1”.
I've tried everything from the forum, but it still doesn't work.
Can someone help me? Thank you so much.
html:
<h1>TEST:<span></span></h1>
css:
#-webkit-keyframes textchange {
0% {content: 'STRING1';}
30% {content: 'SRING2';}
60% {content: 'STRING3';}
100% {content: 'STRING1';}
}
#-moz-keyframes textchange {
0% {content: 'STRING1';}
30% {content: 'SRING2';}
60% {content: 'STRING3';}
100% {content: 'STRING1';}
}
#-o-keyframes textchange {
0% {content: 'STRING1';}
30% {content: 'SRING2';}
60% {content: 'STRING3';}
100% {content: 'STRING1';}
}
#keyframes textchange {
0% {content: 'STRING1';}
30% {content: 'SRING2';}
60% {content: 'STRING3';}
100% {content: 'STRING1';}
}
h1 span::before{
content:'STRING1';
-webkit-animation-name: textchange;
-webkit-animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-play-state: running;
-webkit-animation-direction: normal;
-webkit-animation-delay:0.01s;
-webkit-animation-fill-mode: forwards;
-o-animation: textchange 6s linear 0.01s infinite;
-ms-animation: textchange 6s linear 0.01s infinite;
-moz-animation: textchange 6s linear 0.01s infinite;
animation: textchange 6s linear 0.01s infinite;
}

Answer 1

According to this thread : css animation on "content:" doesn't work on Safari and Firefox
It is not possible to animate the content property of a pseudo element except in Chrome on desktop. So you cannot achieve this threw css for IOS
You have to use Javascript
I would use a loop with an if statement checking the current inner.html value to change the value text after a certain time (setTimeOut or setInterval)