能否同步CSS Animation？附渐变动画代码示例

Great question! Syncing CSS animations across multiple elements is totally achievable, and there are a few reliable methods depending on your setup. Let’s walk through them using your gradient animation example.

1. Use a Single Parent Element to Host the Animation #

The easiest way to guarantee perfect sync is to attach the animation to a parent container, then have all target elements inherit the animated background. Since there’s only one animation instance running, all child elements will naturally stay in lockstep.

Here’s how to adjust your code:

/* Parent container with the animation */
.gradient-animation-host {
  background: linear-gradient(270deg, #FC5C7D, #6A82FB, #EB3349, #F45C43, #FF8008, #FFC837, #4CB8C4, #3CD3AD, #24C6DC, #514A9D, #FF512F, #DD2476, #DA22FF, #9733EE, #22c1c3, #fdbb2d);
  background-size: 3200% 3200%;
  animation: AnimatedGradient 15s ease infinite;
}

/* Child elements inherit the animated background */
.synced-gradient-element {
  background: inherit;
  /* Add your element-specific styles here (padding, border, etc.) */
}

/* Keep your keyframes as-is */
@keyframes AnimatedGradient {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}

Then structure your HTML to wrap all synced elements in the host container:

<div class="gradient-animation-host">
  <div class="synced-gradient-element">First synced element</div>
  <div class="synced-gradient-element">Second synced element</div>
  <div class="synced-gradient-element">Third synced element</div>
</div>

This works best when your elements can share a parent container and don’t need independent background configurations.

2. Use the Web Animations API for Precise Control #

If your elements can’t be grouped in a single parent, the Web Animations API lets you create and start animations for multiple elements at exactly the same time. This eliminates any rendering timing discrepancies that might happen with pure CSS.

Here’s a JavaScript implementation tailored to your gradient animation:

// Grab all elements you want to sync
const targetElements = document.querySelectorAll('.animated-gradient');

// Define your keyframes (mirrors your CSS @keyframes)
const gradientKeyframes = [
  { backgroundPosition: '0% 50%' },
  { backgroundPosition: '100% 50%', offset: 0.5 }, // 50% mark
  { backgroundPosition: '0% 50%', offset: 1 } // 100% mark
];

// Define animation options (matches your CSS animation properties)
const animationOptions = {
  duration: 15000, // 15 seconds in milliseconds
  easing: 'ease',
  iterations: Infinity // Repeat forever
};

// Create and start the animation for all elements simultaneously
targetElements.forEach(element => {
  const animation = element.animate(gradientKeyframes, animationOptions);
  animation.play();
});

You can remove the animation property from your .animated-gradient CSS class since the JS will handle the animation now. This method is ideal for dynamic elements or when you need to pause/resume the synced animation later.

3. Force Sync for Existing CSS Animations #

If you want to stick with pure CSS but notice animations are out of sync (sometimes due to browser rendering queues), you can use a small JavaScript hack to restart all animations at the same time:

// Temporarily remove the animation class from all elements
document.querySelectorAll('.animated-gradient').forEach(el => {
  el.classList.remove('animated-gradient');
});

// Force a browser reflow to ensure the class removal is registered
void document.body.offsetWidth;

// Re-add the class to trigger the animation simultaneously
document.querySelectorAll('.animated-gradient').forEach(el => {
  el.classList.add('animated-gradient');
});

This works by resetting the animation state for all elements and starting them in the same reflow cycle.

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