0

我正在尝试构建一个 AMP 页面，但在验证某些 css 时遇到了一些问题。我有一个 H1，有 4 个单词需要交替。我通过在单词内部创建 4 个跨度并对其不透明度进行动画处理以显示/隐藏我需要的内容（不透明度是白名单属性之一，您可以使用关键帧进行动画处理，因此不应该有任何问题）。这一切都按预期工作，但代码没有被AMP 验证器验证。

我收到这个错误

标签“样式 [amp-keyframes]”中的 CSS 语法错误 - 声明不完整。

对于这个 CSS 

 <style amp-keyframes>
      @keyframes words {
        0% { opacity: 1; }
        25% { opacity: 1; }
        26% { opacity: 0; }
        100% { opacity: 0; }
      }
    </style>

任何想法为什么会发生这种情况，或者可能是另一种解决方案？

4

1 回答 1

0

埃弗里卡！

嗯...这一定是我遇到的最烦人的错误。显然这没问题：

  @keyframes word {
    25% { content:"some text";}
    50% { content:"other text";}
    75% { content:"text";}
  }

但这不是：

  @keyframes word {
    25% { content:"some text";  }
    50% { content:"other text"; }
    75% { content:"text";       }
  }

LE：发现了真正的问题：在关键帧“ ;”的末尾和闭合的小括号“ }”之间，我有空格和不间断空格的组合。删除了这些，现在它可以工作了。

于 2018-01-23T20:05:02.553 回答