动画淡出后删除边距空间 CSS/HTML答案

【问题标题】：Removing margin space CSS/HTML after animation fade out动画淡出后删除边距空间 CSS/HTML
【发布时间】：2019-03-27 22:10:01
【问题描述】：

我正在为班级开发一个数据库项目，我想为它制作一个 GUI，只是为了好玩。所以，我对 HTML/CSS 不太流利，我需要一些帮助..

我想制作一个精美的淡入/淡出消息，以确保我与我的数据库建立了有效的连接。于是我在网上做了一些挖掘，发现了一个类似的帖子：

CSS how to make an element fade in and then fade out?

它在动画中完美运行，但是一旦它淡出所有曾经包含它的边距空间，它仍然分配给页面；话虽如此，是否有任何简单的方法来删除所有不需要的空间？我将提供图片来帮助说明我希望它的外观...

使用的代码：（与相关帖子基本相同，见上）

<!-- dbGUI.php file -->
<!-- DATE -->
<!-- PHP -->
<?php
   $message = "";
   $con = mysqli_connect("#####","#####", "","store");
   // Check connection
   if (mysqli_connect_errno())
   {
          $message = "Failed to connect to MySQL: " . mysqli_connect_error();
          } else {
          $message = "Connected to database...";
          }
        ?>      
<!-- END PHP -->
<!-- MARKUP -- >
   <!DOCTYPE html>
   <html lang="en">
   <!-- HEADER --> 
<head>
   <meta charset="utf-8" />
   <title>Database Admin Portal</title>
   <!-- Favicon -->
   <link rel="shortcut icon" href="#" />
   <!-- CSS -->
   <link rel="stylesheet" href="dbGUI.css" />
   <!-- JAVASCRIPT -->
</head>
<!-- MAIN -->
<body>
   <header>
      <div class="elementToFadeInAndOut"><?php echo $message; ?> </div>
      <nav>
      </nav>
   </header>
   <hr>
   <main>
      <h1>HEADER 1</h1>
      <section>
         <h2>HEADER 2</h2>
         <article>
            <h3>HEADER 3</h3>
            <p>
            </p>
         </article>
      </section>
   </main>
   <hr>
   <!-- FOOTER -->
   <footer>
   </footer>
</body>
</html>

    body
{
    padding: 10px;
    font-size:16pt;
    font-family: Calibri;
}

CSS 文件：

.elementToFadeInAndOut {
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
}

@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
  width: 0px;
  height: 0px;
}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

【问题讨论】：

标签： php html css

【解决方案1】：

display: none; 完成后，动画会将其从 DOM 中隐藏并移除它占用的所有空间。

opacity 将使其透明，但仍会占用它可见时所做的所有空间。

给你一些有趣的链接：

CSS "Display: none;" property

Is there an opposite to display:none?

【讨论】：

【解决方案2】：

在你的结尾（100%）：

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

您可以添加display: none: 以删除它占用的额外空间。您可以更进一步，在执行 display: none:

之前添加另一个过渡

如果您还有其他问题，请告诉我:)

【讨论】：