animation-play-state设为'running'但动画不播放的移动端兼容问题

我之前做着陆页动画时也碰到过一模一样的问题——Mac端Chrome跑起来毫无问题，但到了iOS的Safari和Chrome里，明明控制台显示animation-play-state已经设为running，动画就是纹丝不动。折腾半天后发现，这是iOS的WebKit内核对动画触发机制有特殊要求，下面给你几个亲测有效的解决方案：

1. 用类切换代替直接修改样式属性 #

直接通过jQuery修改animation-play-state的样式，在iOS的WebKit里经常会被浏览器的渲染优化忽略。换成添加/移除CSS类的方式，可靠性会高很多：

CSS 代码 #

/* 基础动画样式，默认运行状态 */
.fade-in {
  opacity: 0; /* 和动画起始帧保持一致，避免初始闪烁 */
  animation: fadeIn 1.2s ease-out forwards;
  animation-play-state: running;
}

/* 暂停状态的类 */
.fade-in.paused {
  animation-play-state: paused;
}

/* 淡入动画关键帧 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

jQuery 代码 #

// 页面加载时给元素加上暂停类
$('.fade-in').addClass('paused');

// 监听滚动事件，判断元素进入视口后移除暂停类
$(window).on('scroll', function() {
  $('.fade-in').each(function() {
    const $el = $(this);
    if (isElementInViewport($el)) {
      $el.removeClass('paused');
    }
  });
});

// 辅助函数：判断元素是否进入视口
function isElementInViewport($el) {
  const rect = $el[0].getBoundingClientRect();
  const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
  return rect.top <= viewportHeight && rect.bottom >= 0;
}

2. 强制浏览器触发重绘 #

如果一定要直接修改animation-play-state，那修改后要强制浏览器重绘元素，让它“意识到”样式变化了。可以通过读取元素的offsetHeight属性（这个操作会触发浏览器重排）来实现：

// 设置动画为运行状态
$('.fade-in').css('animation-play-state', 'running');
// 强制重绘
$('.fade-in')[0].offsetHeight; // 不需要赋值，读取就会触发重排

3. 改用Intersection Observer API（更推荐） #

传统的滚动监听在iOS上容易有性能问题或者触发延迟，用浏览器原生的Intersection Observer API来监听元素是否进入视口，不仅更高效，还能避免很多移动端的兼容性问题：

const fadeElements = document.querySelectorAll('.fade-in');

// 创建观察者实例
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 元素进入视口，移除暂停类
      entry.target.classList.remove('paused');
      // 只触发一次动画，取消观察
      observer.unobserve(entry.target);
    }
  });
}, {
  // 元素进入视口10%时触发
  threshold: 0.1,
  // 可以设置根边距，提前/延迟触发动画
  rootMargin: '0px 0px -50px 0px'
});

// 给每个元素添加暂停类并开始观察
fadeElements.forEach(el => {
  el.classList.add('paused');
  observer.observe(el);
});

关键注意点 #

• 确保动画的初始样式（比如opacity:0）和关键帧的起始帧完全一致，iOS WebKit对这个匹配度要求很高；
• 避免在动画元素上使用display: none或者visibility: hidden，这些属性会让浏览器彻底忽略动画；
• 如果是复杂动画，可以尝试给元素添加will-change: opacity, transform，提示浏览器提前优化渲染，但不要滥用，不然会增加内存消耗。

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