CSS animation is working on desktop but not mobile?

Question

I'm using a keyframes animation for a changing word carousel. It is working perfectly on desktop, but the animation doesn't work at all on mobile. I have tried both Safari and Chrome on mobile (and so has another user) and neither is working. Any help would be immensely appreciated, Also. the pieces of span content I am using are just placeholders.

 .carousel { display: inline-block; }.carousel h3 { font-family: 'Space Mono', monospace; font-size: 2.1rem; font-weight: 400; line-height: 1.7em; }.carousel h3:before{ content: 'architecture'; -webkit-animation: animate 10s linear infinite; } @-webkit-keyframes animate { 0%, 100%{ content: 'architecture'; } 20%{ content: 'illustration'; } 40%{ content: 'x'; } 60%{ content: 'y'; } 80%{ content: 'z'; } }

 <span class="hero-italic">My work is inspired by </span><span class="carousel"><h3></h3></span>.</h1>

Answer 1

Using in animation

---

-webkit-animation: animate 10s linear infinite; /* Safari 4+ */
-moz-animation:    animate 10s linear infinite; /* Fx 5+ */
-o-animation:      animate 10s linear infinite; /* Opera 12+ */
 animation:         animate 10s linear infinite; /* IE 10+, Fx 29+ */

Using in keyframes

---

 @-webkit-keyframes animate {
    ------------------------
    ------------------------
 }
 
 @-moz-keyframes animate {
    ------------------------
    ------------------------
 }
 
 @-o-keyframes animate {
    ------------------------
    ------------------------
 }
 
 @keyframes animate {
    ------------------------
    ------------------------
 }

 .carousel { display: inline-block; }.carousel h3 { font-family: 'Space Mono', monospace; font-size: 2.1rem; font-weight: 400; line-height: 1.7em; }.carousel h3:before{ content: 'architecture'; -webkit-animation: animate 10s linear infinite; -moz-animation: animate 10s linear infinite; -o-animation: animate 10s linear infinite; animation: animate 10s linear infinite; } @-webkit-keyframes animate{ 0%, 100%{ content: 'architecture'; } 20%{ content: 'illustration'; } 40%{ content: 'x'; } 60%{ content: 'y'; } 80%{ content: 'z'; } } @keyframes animate{ 0%, 100%{ content: 'architecture'; } 20%{ content: 'illustration'; } 40%{ content: 'x'; } 60%{ content: 'y'; } 80%{ content: 'z'; } } @-moz-keyframes animate{ 0%, 100%{ content: 'architecture'; } 20%{ content: 'illustration'; } 40%{ content: 'x'; } 60%{ content: 'y'; } 80%{ content: 'z'; } } @-o-keyframes animate { 0%, 100%{ content: 'architecture'; } 20%{ content: 'illustration'; } 40%{ content: 'x'; } 60%{ content: 'y'; } 80%{ content: 'z'; } }

 <span class="hero-italic">My work is inspired by </span><span class="carousel"><h3></h3></span>.</h1>