Question

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

我收到此错误

标记'style [amp-keyframes]'中的CSS语法错误 - 不完整声明。

这个css

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

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

Answer 1

Evrika！

嗯......这一直是我遇到的最烦人的错误。显然这没关系：

  @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：发现真正的问题：在关键帧“;”的结尾与clossing braket“}”之间，我有空格和不间断空格的组合。删除了那些，现在它可以工作。

AMP-HTML - CSS语法错误不完整声明

1 个答案: