CSS 过渡可以在设定时间后自动隐藏元素吗？

使用 CSS 转换自动隐藏元素

你能让元素在页面加载后 5 秒消失吗？虽然 jQuery 解决方案是已知的，但本文探讨了如何使用 CSS 过渡来实现相同的效果。

可能吗？

可以，但不是以传统方式。通常，过渡应用于显示、尺寸或溢出等属性。然而，这些属性直接控制元素的可见性和空间占用。

创新解决方案

要绕过此限制，请为目标元素创建动画。 5 秒后，将其可见性切换为隐藏。此外，将其高度和宽度设置为零，以防止其占用文档流中的空间。

示例实现

CSS:

#hideMe {
  -webkit-animation: cssAnimation 0s ease-in 5s forwards;
  animation: cssAnimation 0s ease-in 5s forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes cssAnimation {
  to {
    width: 0;
    height: 0;
    overflow: hidden;
  }
}

HTML:

<div>

此代码设置一个动画，在页面加载 5 秒后将元素缩小到零尺寸。元素在保持其在文档流中的位置的同时被隐藏。

结论

虽然隐藏元素的传统方法可能不直接适用，但使用可见性切换和零尺寸与 CSS 动画相结合，为在指定时间间隔后自动隐藏元素提供了创新的解决方案。

以上是CSS 过渡可以在设定时间后自动隐藏元素吗？的详细内容。更多信息请关注PHP中文网其他相关文章！