CSS动画可以在台式机上工作，但不能在移动设备上工作吗？

Question

我正在使用关键帧动画制作不断变化的单词轮播。它可以完美地在桌面上运行，但是动画根本无法在移动设备上运行。我已经在移动设备上尝试了Safari和Chrome浏览器（另一个用户也尝试了），但都无法正常工作。任何帮助将不胜感激！另外，我正在使用的span内容只是占位符。

  .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

在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+ */

在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>