AMP页面CSS验证报错：style[amp-keyframes]语法不完整声明

Hey there! Let's break down why that validator error is popping up and get your alternating H1 words working smoothly in AMP.

Why You're Seeing the Error #

The AMP validator throws the "incomplete declaration" error because AMP enforces strict rules for amp-keyframes CSS: every keyframe block in your @keyframes rule must explicitly target a selector (like a class or element).

Your original code defines opacity changes without tying them to a specific selector (e.g., .word for your span elements). While regular browsers parse this just fine, AMP's validator flags it as incomplete—this is to ensure animations are predictable and don't accidentally affect unrelated elements, keeping AMP pages performant.

Alternative Solutions #

Solution 1: Add Selectors to Your Existing Keyframes #

The simplest fix is to wrap your opacity properties in a selector targeting your span elements inside each keyframe block. Here's how to adjust your code:

First, your HTML (with a consistent class for each word span):

<h1>
  <span class="word">Word 1</span>
  <span class="word">Word 2</span>
  <span class="word">Word 3</span>
  <span class="word">Word 4</span>
</h1>

Then your amp-custom styles (positioning spans and setting up animations):

<style amp-custom>
.word {
  position: absolute;
  opacity: 0;
  animation: words 8s infinite;
}

/* Stagger animations with delays */
.word:nth-child(1) { animation-delay: 0s; }
.word:nth-child(2) { animation-delay: 2s; }
.word:nth-child(3) { animation-delay: 4s; }
.word:nth-child(4) { animation-delay: 6s; }
</style>

Finally, update your amp-keyframes to include the .word selector in each keyframe:

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

This keeps your original animation logic intact while satisfying AMP's validator requirements.

Solution 2: Explicitly Target Each Word in Keyframes #

If you prefer full transparency over each word's state at every stage, you can define all opacity values directly in the keyframes. This eliminates the need for animation delays:

<style amp-keyframes>
@keyframes words {
  0%, 25% {
    .word:nth-child(1) { opacity: 1; }
    .word:nth-child(2), .word:nth-child(3), .word:nth-child(4) { opacity: 0; }
  }
  26%, 50% {
    .word:nth-child(2) { opacity: 1; }
    .word:nth-child(1), .word:nth-child(3), .word:nth-child(4) { opacity: 0; }
  }
  51%, 75% {
    .word:nth-child(3) { opacity: 1; }
    .word:nth-child(1), .word:nth-child(2), .word:nth-child(4) { opacity: 0; }
  }
  76%, 100% {
    .word:nth-child(4) { opacity: 1; }
    .word:nth-child(1), .word:nth-child(2), .word:nth-child(3) { opacity: 0; }
  }
}
</style>

Simplify your amp-custom styles to position spans and apply the animation to the parent H1:

<style amp-custom>
h1 { position: relative; }
.word { position: absolute; opacity: 0; }
h1 { animation: words 8s infinite; }
</style>

This approach makes exactly what's happening at each stage of the animation crystal clear, and it will pass the AMP validator with no issues.

Either solution will resolve the error while keeping your alternating word functionality working as expected!

内容的提问来源于stack exchange，提问作者Iulius