在这种情况下不使用关键帧应用过渡的另一种方法是将元素的宽度设置为零，然后在悬停时取消设置

.className{
  visibility:hidden;
  opacity: 0;
  transition: .2s;
  width:0;
}

.className:hover{
  visibility:visible;
  margin-right: .5rem;
  opacity: 1;
  width:unset;
}

我有一个类似的问题，但我找不到答案。后来几次谷歌搜索把我带到了这里。考虑到我没有找到我所希望的简单答案，我偶然发现了一个既优雅又有效的解决方案。

结果表明，可见性CSS属性具有一个值折叠，通常用于表项。然而，如果在任何其他元素上使用，它会有效地将它们渲染为隐藏的，与显示几乎相同：隐藏，但添加了元素不占用任何空间的功能，您仍然可以为有问题的元素设置动画。

下面是一个简单的例子。

函数toggleVisibility（）{let exampleElement=document.querySelector（'span'）；if（exampleElement.classList.incontains（'visible'））{回来}exampleElement.innerHTML='我不会占用空间！'；exampleElement.classList.tggle（'hidden'）；exampleElement.classList.tggle（'visible'）；setTimeout（（）=>{exampleElement.classList.tggle（'visible'）；exampleElement.classList.tggle（'hidden'）；}, 3000);}#主要的，主要的{显示：柔性；弯曲方向：柱；宽度：300px；文本对齐：居中；}.隐藏{可见性：塌陷；不透明度：0；过渡：可见性2s，不透明度2s线性；}.可见{可见性：可见；不透明度：1；过渡：可见性0.5s，不透明度0.5s线性；}<div id=“main”><button onclick=“toggleVisibility（）”>单击我</按钮><span class=“hidden”></span><span>我会被推回去</span></div>

我找到了更好的方法来解决这个问题，你可以使用CSS动画，并为显示项目创造出很棒的效果。

.item {
     display: none;
}

.item:hover {
     display: block;
     animation: fade_in_show 0.5s
}

@keyframes fade_in_show {
     0% {
          opacity: 0;
          transform: scale(0)
     }

     100% {
          opacity: 1;
          transform: scale(1)
     }
}

根据W3C工作草案2013年11月19日，显示器不是可设置动画的属性。幸运的是，可见性是可设置动画的。您可以用不透明度的过渡（JSFiddle）链接其过渡：

HTML格式：<a href=“http://example.com“id=”foo“>foo”</a><button id=“hide button”>隐藏</button><button id=“show button”>显示</button>CSS：#食品{过渡特性：可见性，不透明度；转换持续时间：0s，1s；}#foo.hidden餐厅{不透明度：0；可见性：隐藏；过渡特性：不透明度，可见性；转换持续时间：1s，0s；转换延迟：0s，1s；}用于测试的JavaScript：var foo=文档.getElementById（'fo'）；document.getElementById（'hide-button'）.onclick=函数（）{foo.className=“隐藏”；};document.getElementById（'show-button'）.onclick=函数（）{foo.className=“”；};

请注意，如果您只是使链接透明，而不设置可见性：隐藏，那么它将保持可单击状态。

此解决方案具有极好的兼容性，我还没有见过它：

.hidden-element {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity .5s ease-out;
}

.hidden-element.visible {
  position: static;
  z-index: auto;
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

说明：它使用了可见性：隐藏技巧（与“显示和动画”在一个步骤中兼容），但它使用了组合位置：绝对；z指数：-1；指针事件：无；以确保隐藏的容器不占用空间并且不响应用户交互。

我怀疑，如果显示发生变化，转换被禁用的原因是因为显示实际的功能。它不会改变任何可以想象的流畅动画。

显示：无；可见性：隐藏；是两件完全不同的事情。两者都具有使元素不可见的效果，但具有可见性：隐藏；它仍然呈现在布局中，但只是不明显。隐藏元素仍然占用空间，并且仍然以内联或块、块内联或表的形式呈现，或者以显示元素告诉的方式呈现，并相应地占用空间。其他元素不会自动移动以占用该空间。隐藏元素只是不将其实际像素渲染到输出。

display：另一方面，没有一个实际上阻止元素完全渲染。它不占用任何布局空间。其他原本占据该元素占用的部分或全部空间的元素现在调整为占据该空间，就好像该元素根本不存在一样。

显示不仅仅是另一种视觉属性。它建立了元素的整个呈现模式，例如它是块、内联、内联块、表、表行、表单元格、列表项还是其他任何元素！每一个都有非常不同的布局影响，并且没有合理的方法来动画化或平滑地转换它们（例如，尝试想象从块到内联的平滑转换，反之亦然！）。

这就是为什么如果显示更改（即使更改为none或从none更改为none-none不仅仅是不可见的，它本身的元素渲染模式意味着根本没有渲染！），则会禁用转换。