CSS @keyframes能否修改display属性？相关动画问题求助

问题1：设置display:none后动画失效 #

display:none会让元素彻底脱离文档流，浏览器根本不会去渲染它，绑定的CSS动画自然就跑不起来。要实现隐藏还能触发动画的效果，换用以下属性组合：

• 用visibility:hidden + opacity:0隐藏元素，这俩属性都支持CSS动画/过渡，元素还留在文档流里，动画能正常执行
• 如果要完全模拟display:none的占位效果，可以再加height:0和overflow:hidden，避免元素占空间

示例CSS：

/* 初始隐藏状态 */
#a {
  visibility: hidden;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}
/* 动画触发类 */
#a.cd-fade-in {
  visibility: visible;
  opacity: 1;
  height: auto;
  /* 你的@keyframes动画代码 */
}

问题2：鼠标移入时无法重启动画 #

直接连着调用removeClass和addClass，浏览器会在同一帧里完成这俩操作，根本没检测到元素状态变化，所以动画不会重新跑起来。给你两个解决办法：

方法1：强制浏览器重排 #

移除类之后，读一下元素的布局属性（比如offsetHeight），逼着浏览器先重排，再添加类：

$(".bt").mouseenter(function() {
  const el = $("#a")[0];
  el.classList.remove("cd-fade-in");
  // 触发重排，必须写这行
  void el.offsetHeight;
  el.classList.add("cd-fade-in");
});

方法2：延迟添加类 #

用setTimeout把添加类的操作放到下一帧执行，让浏览器能检测到状态变化：

$(".bt").mouseenter(function() {
  const $el = $("#a");
  $el.removeClass("cd-fade-in");
  setTimeout(() => {
    $el.addClass("cd-fade-in");
  }, 10);
});

不用display实现显示隐藏动画的方案 #

既然@keyframes改不了display，就用支持动画的属性模拟：

• 淡入淡出：opacity + visibility（解决opacity为0时元素还能点击的问题）
• 滑入滑出：transform: translateY()/translateX()配合opacity
• 收缩展开：height + padding + overflow:hidden

这些属性都能被CSS动画或过渡控制，视觉效果和display切换差不多，还能保证动画正常运行。

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