How to get @keyframe animations to work in Safari like Chrome?

Design help Experimental browsers
1

I have a really simple spin animation on my landing page made in webflow. The animation works great on Chrome ,IE and Android Phones but I can not seem to get it working on Safari or Iphone. I have tried using whole percentages, display: inline-block, and thought the issue was short-hand like -webkit-animation: 6s spin infinite; Nothing’s working. What am I missing?

Shortened Version:

#spin:after {
  content:"UNKNOWN TO KNOWN";
  display: inline-block;
  -webkit-animation: spin 6s linear infinite;
  animation: spin 6s linear infinite;
}
 @-webkit-keyframes spin {
  0% { content:"▮"; }
  50% { content:"UKNN 2NWNR▮"; }
  70% { content: "UNKNOWN TO KNOWN"; }   
  100% { content: "▮"; }
  } 
@keyframes spin {
  0% { content:"▮"; }
  50% { content:"UKNN 2NWNR▮"; }
  70% { content: "UNKNOWN TO KNOWN"; }   
  }

2

Did you manage to find a solution for this?

Thanks!