CSS动画在桌面端可以工作，但在移动端无法工作？

Question

CSS动画在桌面端可以工作，但在移动端无法工作？

3

我在使用关键帧动画来制作一个更换单词的轮播图。桌面端完美运行，但是移动端上动画完全无法工作。我已经尝试在移动版的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>

- gms21209

我在移动端格式下检查了你的代码。你的代码运行良好。 - s.kuznetsov

它应该在大多数现代移动浏览器上运行。我建议使用::before而不是:before，因为::表示伪元素，而:表示伪类。 - I like eating pizza thursdays

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rayees AC · Accepted Answer

在动画中使用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>