iOS端Chrome/Safari中CSS关键帧动画失效问题求助

核心问题排查 #

• 重复的.aboutme_img img选择器：后面的样式完全覆盖了初始动画配置，导致opacity:0、animation等核心动画属性被丢弃，这是动画不工作的首要原因。
• animation-timeline: view()的WebKit兼容性：iOS端Chrome和Safari基于WebKit内核，需添加对应前缀，且仅iOS 16.4及以上版本支持视口时间线动画。
• 冗余前缀：关键帧内无需重复声明-webkit-transform，已通过-webkit-animation指定前缀的动画，浏览器会自动处理关键帧内的属性前缀。

修正后的代码 #

.aboutme_secondgrid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.aboutme_img img {
  transform: scale(.8);
  -webkit-transform: scale(.8);
  opacity: 0;
  height: 600px;
  /* 适配WebKit内核的视口时间线 */
  animation: fade-in linear forwards;
  -webkit-animation: fade-in linear forwards;
  animation-timeline: view();
  -webkit-animation-timeline: view();
  animation-range-start: cover 100px;
  animation-range-end: cover 700px;
}

/* 用媒体查询包裹移动端样式，避免覆盖基础动画配置 */
@media (max-width: 768px) {
  .aboutme_img img {
    transform: scale(.5);
    -webkit-transform: scale(.5);
    height: 300px;
    animation-range-end: cover 300px;
  }
}

@keyframes fade-in {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes fade-in {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

额外注意事项 #

• 确认iOS版本：若设备系统版本低于16.4，animation-timeline: view()不被支持，需降级使用JavaScript滚动监听触发动画类的方案。
• 动画范围规则：animation-range-start/end需配合cover或contain关键字明确视口覆盖逻辑，避免纯数值导致的解析异常。
• 排查样式冲突：检查页面中是否有其他transform相关的过渡、动画规则，干扰当前动画执行。

内容的提问来源于stack exchange，提问作者Νεκτάριος Νεκτάριος