CSS动画卡片详情面板异常：动画后自动回退覆盖卡片求助

咱们先揪出问题的核心：CSS动画没法对display属性做平滑过渡，而且你的动画没设置结束后的状态保留，这就是为啥动画跑完，面板总回到覆盖卡片状态的原因。

问题拆解 #

你尝试的两套方案里，踩了两个关键坑：

1. 在@keyframes里用了display属性——CSS动画根本不支持这个属性的渐变切换，它会瞬间跳变，直接打乱动画逻辑。
2. 没加动画状态保留的设置，动画执行完后元素会自动回到初始样式，白忙活一场。

修正后的实现方案 #

咱们换个思路，用opacity控制可见性、margin-top控制滑动，再配合动画状态保留，就能实现你要的类似Card Reveal的效果：

完整CSS代码

/* 默认状态：面板在卡片下方，透明不可见 */
.default-details {
  margin-top: 107%;
  opacity: 0;
  transition: all 0.3s ease; /* 可选，用于非动画场景的平滑切换 */
}

/* 打开动画：上滑并显示，forwards让动画结束后保留最终状态 */
.open-animation {
  animation: open 2s forwards;
}

/* 关闭动画：下滑并隐藏 */
.close-animation {
  animation: close 2s forwards;
}

@keyframes open {
  from {
    margin-top: 107%;
    opacity: 0;
  }
  to {
    margin-top: 0;
    opacity: 1;
  }
}

@keyframes close {
  from {
    margin-top: 0;
    opacity: 1;
  }
  to {
    margin-top: 107%;
    opacity: 0;
  }
}

关键说明

• 用opacity替代display控制可见性：既能实现平滑过渡，又不会破坏动画的状态逻辑。
• forwards是核心：它会强制元素在动画结束后保持to帧的样式，不会跳回初始状态。
• 如果需要在关闭动画结束后完全禁用面板交互，可以通过JS在动画结束后添加display: none，但绝对不要在动画关键帧里写这个属性。

配合的JS逻辑（示例） #

你需要用JS来切换动画类，实现点击交互：

// 假设按钮和面板的DOM元素
const revealBtn = document.querySelector('.reveal-btn');
const detailsPanel = document.querySelector('.default-details');

// 点击按钮打开面板
revealBtn.addEventListener('click', () => {
  detailsPanel.style.display = 'block'; // 先确保面板可见
  detailsPanel.classList.remove('close-animation');
  detailsPanel.classList.add('open-animation');
});

// 点击面板关闭
detailsPanel.addEventListener('click', () => {
  detailsPanel.classList.remove('open-animation');
  detailsPanel.classList.add('close-animation');
  
  // 动画结束后隐藏面板
  setTimeout(() => {
    detailsPanel.style.display = 'none';
  }, 2000); // 时间和动画时长保持一致
});

这样就能完美实现：点击按钮面板上滑覆盖卡片，点击面板下滑消失的效果啦！

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