IE11与Edge中CSS飞入动画失效问题排查求助

嘿，我一眼就揪出问题所在了——你的@keyframes写法不符合标准语法，IE11和旧Edge（EdgeHTML内核）对这种语法错误的容忍度为零，直接就把整个动画规则丢掉了，这就是为啥你看不到盒子也看不到动画。

你把from/to和百分比关键帧混在一起写了：

@keyframes fade { 
  from {opacity: 0;} 
  to {opacity: 1;} 
  0% {transform: translateY(200%);} 
  100% {transform: translateY(0%);} 
}

这种写法在现代浏览器里可能能侥幸运行，但IE11和旧Edge会判定整个@keyframes无效，直接跳过。

修正方案：统一关键帧写法 #

你需要把关键帧统一成百分比格式，把from换成0%，to换成100%，并把同一时间点的属性合并：

@keyframes fade {
  0% {
    opacity: 0;
    transform: translateY(200%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}

额外检查点 #

1. 动画应用是否正确：确保你的盒子元素上添加了animation属性，比如：

.box {
  animation: fade 0.6s ease-out forwards;
  animation-delay: 0.2s; /* 实现延迟飞入效果 */
  /* 初始状态要和动画起始帧匹配，避免闪烁 */
  opacity: 0;
  transform: translateY(200%);
}

这里的forwards是关键，它能让动画结束后保持最终状态，刚好符合你“保持显示”的需求。

2. 检查@media规则完整性：你提供的代码里@media only screen and (min-device-width : 769px) { #shopif...是截断的，要确保媒体查询内的选择器正确指向了你的盒子，并且动画属性确实被应用上了。

3. 避免用display:none初始化：如果你的盒子默认是display:none，动画不会生效，改用opacity:0或者visibility:hidden配合transform来做初始隐藏。

这样修改后，IE11和旧Edge应该就能正常渲染动画和盒子了。

内容的提问来源于stack exchange，提问作者Kenneth Bon Nielsen