0

I am working on a database project for class and I wanted to make a GUI for it just for funsies. So, I am not too fluent in HTML/CSS and I need some help..

I want to make a fancy fade in/out message to ensure I have a working connection to my database. So I did some digging online and found a similar post:

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

It works perfectly in animation, however once it fades out all the margin space that once contained it is still allocated to the page; with that said, is there any simplistic way to removing all that unwanted space? I'll provided images to help illustrate what exactly I want it to look like...

At page load After animation ends

Code used: (basically the same as the related post, see above)

<!-- 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 File:

.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; }
}
Julia
  • 57
  • 9

2 Answers2

1

display: none; when you have completed the animation will hide it from the DOM and remove any space it was taking up.

opacity will make it transparent, but will still take up all the space it did when it was visible.

Some interesting links for you:

CSS "Display: none;" property

Is there an opposite to display:none?

Adam
  • 1,294
  • 11
  • 24
1

At the end (100%) of your:

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

you can add display: none: to remove the extra space that it was taking up. You can take it one step further and add another transition before doing display: none:

Let me know if you have any more questions :)

kcvan
  • 178
  • 9