I’ve run into this exact quirky issue with iOS WebKit’s CSS animation handling before! Let’s break down what’s going wrong and how to get your animation working across both Android and iOS WebViews:

Key Issues & Fixes #

• Missing -webkit- prefix for the animation property
  iOS WebView (especially older versions) requires the -webkit- prefix not just for @keyframes and transform, but also for the animation declaration itself. Your original .slidRtoLanim.actv class only uses the standard animation property—Android handles this fine, but iOS might completely ignore it.

• Finicky visibility behavior in iOS animations
  iOS WebKit can struggle with visibility changes inside keyframes. Instead of toggling visibility, rely solely on opacity and transform to hide/show the element—this approach is far more consistent across platforms.

• Force a reflow to trigger the animation
  Sometimes iOS WebView doesn’t detect class changes immediately. A tiny delay or forced reflow can nudge it to recognize and run the animation.

Modified Working Code #

Here’s the adjusted CSS and HTML that should work seamlessly on both platforms:

.slidRtoLanim {
  /* Base styles with full prefix support */
  transform: translateX(30px);
  -webkit-transform: translateX(30px);
  opacity: 0;
  width: 300px;
  height: 500px;
  background: #000;
  /* Optional: Prevent accidental interactions while hidden */
  pointer-events: none;
}

.slidRtoLanim.actv {
  /* Add explicit -webkit-animation for iOS */
  animation: RLslid 0.1s forwards;
  -webkit-animation: RLslid 0.1s forwards;
  pointer-events: auto;
}

/* Standard and webkit keyframes (keep both for broad support) */
@keyframes RLslid {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@-webkit-keyframes RLslid {
  to {
    -webkit-transform: translateX(0);
    opacity: 1;
  }
}

<div class="slidRtoLanim actv"></div>

Extra Troubleshooting Tips #

• If you’re still using the deprecated UIWebView, migrate to WKWebView—it has drastically better CSS animation support and performance for modern iOS versions.
• If the animation still fails to trigger, try wrapping the class addition in a 0ms setTimeout (this forces the browser to reflow before applying the animation):

  setTimeout(() => {
    document.querySelector('.slidRtoLanim').classList.add('actv');
  }, 0);
  

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