iOS Safari中CSS动画（从上方出现、缩放后消失）无法运行

问题分析 #

原代码存在几个导致iOS WebKit内核不兼容的问题：

• 关键帧100%中重复声明-webkit-transform，后声明会覆盖前一个，导致动画状态异常
• 未明确触发硬件加速，iOS的WebKit对未启用GPU加速的复杂动画支持不佳
• 部分关键帧缺少opacity状态定义，动画过渡不完整
• 关键帧命名存在拼写错误（Dissapear应为Disappear，虽不影响功能但不符合规范）

修正后的代码 #

/* WebKit前缀关键帧（兼容iOS旧版本） */
@-webkit-keyframes appearFromAboveAndScaleAndDisappear {
  0% {
    -webkit-transform: translate3d(0, -30px, 0);
    opacity: 0;
  }
  20% {
    -webkit-transform: translate3d(0, -25px, 0);
    opacity: 0.8;
  }
  30% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  45% {
    -webkit-transform: translate3d(0, 0, 0) scale3d(1.2, 1.2, 1.2);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    opacity: 1;
  }
  55% {
    -webkit-transform: translate3d(0, 0, 0) scale3d(0.6, 0.6, 0.6);
    opacity: 1;
  }
  60% {
    -webkit-transform: translate3d(0, 0, 0) scale3d(0, 0, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scale3d(0, 0, 0);
    opacity: 0;
  }
}

/* 标准关键帧（兼容现代浏览器） */
@keyframes appearFromAboveAndScaleAndDisappear {
  0% {
    transform: translate3d(0, -30px, 0);
    opacity: 0;
  }
  20% {
    transform: translate3d(0, -25px, 0);
    opacity: 0.8;
  }
  30% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  45% {
    transform: translate3d(0, 0, 0) scale3d(1.2, 1.2, 1.2);
    opacity: 1;
  }
  50% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    opacity: 1;
  }
  55% {
    transform: translate3d(0, 0, 0) scale3d(0.6, 0.6, 0.6);
    opacity: 1;
  }
  60% {
    transform: translate3d(0, 0, 0) scale3d(0, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0) scale3d(0, 0, 0);
    opacity: 0;
  }
}

.appearFromAboveAndScaleAndDisappear {
  z-index: 100;
  position: relative;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: appearFromAboveAndScaleAndDisappear 1.5s linear forwards;
  animation: appearFromAboveAndScaleAndDisappear 1.5s linear forwards;
}

关键修复点说明 #

• 合并transform属性：每个关键帧中只保留一个transform声明，同时包含位移和缩放效果，避免属性覆盖
• 启用硬件加速：添加-webkit-backface-visibility: hidden强制iOS WebKit使用GPU渲染动画，解决卡顿或不生效问题
• 完善opacity状态：在缩放至0的关键帧同步设置opacity: 0，确保元素完全消失，避免残留
• 使用forwards填充模式：动画结束后保持最后一帧状态，避免元素跳回初始位置
• 统一属性写法：标准opacity无需前缀，iOS WebKit已支持，减少冗余前缀

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