使用jQuery停止骨架屏CSS动画不生效该如何解决？

你当前写法失效的核心原因是：CSS动画是绑定在[data-placeholder]的::after伪元素上的，伪元素不属于常规DOM节点，直接用jQuery的.css()方法修改宿主元素的animation属性，无法作用到伪元素上。

推荐解决方案 #

最稳妥且兼容性好的方式是通过新增控制类实现：

1. 修改CSS规则，新增加载完成后的状态 #

[data-placeholder]::after {
   content: " ";
   box-shadow: 0 0 50px 9px rgba(254,254,254);
   position: absolute;
   top: 0;
   left: -100%;
   height: 100%; 
   animation: load 1s infinite;
}
/* 新增以下规则，匹配加了loaded类的元素的伪元素 */
[data-placeholder].loaded::after {
  animation: none;
}
@keyframes load {
   0%{ left: -100%}
   100%{ left: 150%}
}

2. 修改jQuery逻辑，页面加载完成后给元素加控制类 #

$(window).on("load", function() {
  $("#press").fadeOut("slow");
  // 原来的修改css替换为加loaded类
  $("[data-placeholder]").addClass("loaded");
});

备选方案（CSS变量实现） #

如果不想新增类规则，也可以用CSS变量实现，兼容性稍差（支持IE11以上所有现代浏览器）：

1. 修改CSS动画定义，用变量控制：

[data-placeholder]::after {
   content: " ";
   box-shadow: 0 0 50px 9px rgba(254,254,254);
   position: absolute;
   top: 0;
   left: -100%;
   height: 100%; 
   animation: var(--placeholder-ani, load 1s infinite);
}

2. jQuery修改对应变量即可：

$(window).on("load", function() {
  $("#press").fadeOut("slow");
  $("[data-placeholder]").css("--placeholder-ani", "none");
});

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