html - CSS 动画可以在桌面上运行但不能在移动设备上运行？

Question

我正在为不断变化的单词轮播使用关键帧动画。它在桌面上运行完美，但动画在移动设备上根本不起作用。我已经在移动设备上尝试过 Safari 和 Chrome(另一个用户也是如此)，但都没有用。任何帮助将不胜感激!此外，我使用的跨度内容片段只是占位符。

  .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

在动画中使用

---

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

在关键帧中使用

---

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