Firefox中CSS动画的display属性不生效问题求助

核心原因很明确：CSS动画规范里，display属于不可动画属性。Chrome对这类属性做了兼容处理，会在关键帧中强制应用，但Firefox严格遵循标准，不会在动画过程中解析display的变化，所以加-moz-前缀完全没用。

下面给你两个可行的替代方案，实现和原需求一致的效果：

方案一：用visibility+opacity模拟显示隐藏（纯CSS） #

通过可动画的visibility和opacity属性配合位置动画，实现元素滑出并隐藏的效果：

@keyframes edit-page-close {
  0% {
    visibility: visible;
    opacity: 1;
    top: 15vh;
  }
  99% {
    visibility: visible;
    opacity: 0;
    top: -70vh;
  }
  100% {
    visibility: hidden;
    opacity: 0;
    top: -70vh;
  }
}

/* 目标元素基础样式 */
.edit-page {
  position: relative;
  /* 设置动画时长、填充模式，forwards让动画停在最后一帧 */
  animation: edit-page-close 0.6s forwards;
}

• visibility: visible/hidden控制元素是否可交互可见，opacity控制透明度，两者结合实现平滑消失
• 99%帧保留visibility: visible是为了让位置动画完整执行，避免元素提前不可见导致动画跳变

方案二：动画结束后用JS设置display:none（彻底释放布局） #

如果需要动画结束后彻底让元素不占用布局空间，可以配合animationend事件：

@keyframes edit-page-close {
  0% {
    opacity: 1;
    top: 15vh;
  }
  100% {
    opacity: 0;
    top: -70vh;
  }
}

.edit-page {
  position: relative;
  animation: edit-page-close 0.6s forwards;
}

const targetEl = document.querySelector('.edit-page');
targetEl.addEventListener('animationend', () => {
  targetEl.style.display = 'none';
});

这个方案里，先用透明度和位置完成动画，动画结束后再设置display:none，既保证了Firefox下的动画正常，又达到了最终隐藏元素的目的。

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