CSS Keyframe Animation not working in Safari (tried other threads)

I can't get the below to work in Safari, same issue when using -webkit- works everywhere else but Safari.. any ideas?

HTML:

<h3 class="title">Count To:</h3>

CSS:

h3.title:after {
    animation-name: changeContent;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-duration: 24s;
    animation-delay: 0;

    display: inline;
    content: '';
    color: red;
    text-transform: uppercase;
    margin-left: 1rem;
}

@keyframes changeContent {
    0%,1% {
        opacity: 0;
    }
    8% {
        content: "One";
        opacity: 1;
    }
    16% {
        opacity: 0;
    }
    24% {
        content: "Two";
        opacity: 1;
    }
    32% {
        opacity: 0;
    }
    40% {
        content: "Three";
        opacity: 1;
    }
    48% {
        opacity: 0;
    }
    56% {
        content: "Four";
        opacity: 1;
    }
    64% {
        opacity: 0;
    }
    72% {
        content: "Five";
        opacity: 1;
    }
    80% {
        opacity: 0;
    }
    88% {
        content: "Six";
        opacity: 1;
    }
    96% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

I read that Safari doesn't like shorthand so I changed that, no difference. I also made sure there was a start and an end % as I believe from: and to: are also not preferred in Safari.