Animation示例与自定义复杂动画在IE10失效，Chrome正常运行求协助

Hey there, let's break down why your animations are failing in IE10 and fix them up! IE10 has pretty limited support for modern animation standards compared to Chrome, so the issues are almost certainly tied to its lack of support for unprefixed properties and modern APIs. Here's what you need to do:

1. CSS Animations? Add -ms- Prefixes Everywhere #

IE10 only recognizes CSS animations with the -ms- vendor prefix—standard unprefixed properties will be ignored entirely. That includes both the animation properties themselves and your keyframes:

Example Fix for CSS Animations #

/* Standard keyframes for modern browsers */
@keyframes customSlide {
  0% { transform: translateX(-100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* IE10-specific keyframes */
@-ms-keyframes customSlide {
  0% { -ms-transform: translateX(-100%); opacity: 0; }
  100% { -ms-transform: translateX(0); opacity: 1; }
}

/* Apply animation with both standard and prefixed properties */
.animated-element {
  animation: customSlide 0.8s ease-out forwards;
  -ms-animation: customSlide 0.8s ease-out forwards;
}

2. Animation End Events: Use the IE10-Specific Event Name #

IE10 doesn't support the standard animationend event—it uses msanimationend instead. You'll need to listen for both events to cover all browsers:

Example Event Listener Fix #

const animateElement = document.querySelector('.animated-element');

function handleAnimationEnd() {
  // Your post-animation logic here
  console.log('Animation finished!');
}

// Listen for standard event (Chrome, Firefox, etc.)
animateElement.addEventListener('animationend', handleAnimationEnd);
// Listen for IE10-specific event
animateElement.addEventListener('msanimationend', handleAnimationEnd);

If you're using DOM properties instead of addEventListener, you'll need to set both:

animateElement.onanimationend = handleAnimationEnd;
animateElement.onmsanimationend = handleAnimationEnd;

3. Using Web Animations API? IE10 Doesn't Support It #

If your "complex custom animation" uses the modern Web Animations API (e.g., element.animate()), IE10 has zero support for this API. You'll need to add a fallback to CSS animations (with -ms- prefixes) for IE10:

Example Feature Detection & Fallback #

const targetElement = document.querySelector('.complex-animation');

if (Element.prototype.animate) {
  // Run modern Web Animations API code for Chrome/modern browsers
  targetElement.animate([
    { transform: 'scale(0.5)', opacity: 0 },
    { transform: 'scale(1)', opacity: 1 }
  ], {
    duration: 1000,
    easing: 'ease-in-out',
    fill: 'forwards'
  });
} else {
  // Fallback to CSS animation for IE10 and older
  targetElement.classList.add('ie-complex-animation');
}

Then define the fallback CSS with -ms- prefixes as shown in step 1.

Quick Additional Checks #

• IE10 has limited support for 3D transforms (like translateZ), so if your animation uses 3D effects, you may need to simplify them to 2D for IE10.
• Double-check that all animation-related properties (like animation-delay, animation-iteration-count) have their -ms- prefixed versions in IE10.

That should get your animations working in IE10 while keeping them functional in Chrome. Let me know if you hit any specific snags with your custom animation!

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