CODEWITHSUNDEEP
htmlcss
gms21209
gms21209

Reputation: 31

CSS animation is working on desktop but not mobile?

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>

Upvotes: 3

Views: 912

Answers (1)

Rayees AC
Rayees AC

Reputation: 4659

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>

Upvotes: 1

Related Questions