Stop Components of CSS Slide-in Animation Being Visible at Beginning-CodePudding

I have three bars set to slide in from the right and settle at the left. The animation itself is fine. The problem is that before the animation begins the three bars are positioned in the middle of the screen before disappearing and then commencing the animation.

When the page is refreshed I do not want these bars to be visible until they begin their slide-in. How can I do this?

<body>
    <header>
        <h1>xxxx xxxxxxx</h1>
        <nav>
            <ul>
                <li><a href="about.html">About Me</a></li>
                <li id="contact_nav"><a href="contact.html">Contact</a></li>
                <li id="gallery_nav"><a href="gallery.html">Gallery</a></li>
            </ul>
        </nav>
        
        <div >
            <div id="bar1" ><p>Bespoke furniture ...</p></div><br>
            <div id="bar2" ><p>... and interesting items ...</p></div><br>
            <div id="bar3" ><p>... brought to life!</p></div><br>
        </div>
    </header>
</body>
</html>

* {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'Avenida Std';
    src: url('AvenidaStd.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
    background-image: linear-gradient(to right, #24243E, #302B63, #0F0C29); 
}

h1, h2, h3, h4 {
    font-family: 'Avenida Std';
}

header h1 {
    font-size: 12vw;
    color: grey;
    position: absolute;
    padding-left: 20px;
    padding-top: 55px;
    text-shadow: 0.10em 0.08em 5px black;
    transform: rotate(-10deg);
}

nav {
    position: relative;
}
 
nav ul {
    align-content: right;
}

nav ul li {
    font-family: 'Avenida Std';
    font-size: 5rem;
    margin-left: 85%;
    padding-top: 20px;
    list-style-type: none;
    justify-content: right;
}

nav ul li a {
    text-decoration: none;
    color: white;   
}

nav ul li a:hover {
    color: yellow;
    text-shadow: 0 0 40px yellow;
}

nav #contact_nav {
    padding-top: 0.5rem;
}

nav #gallery_nav {
    padding-top: 0.5rem;
    padding-bottom: 0;
    z-index: 100;
}

#bar1 {
    width: 50vw;
    height: 3rem;
    background: black;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

#bar2 {
    width: 50vw;
    height:  3rem;
    background: black;
}

#bar3 {
    width: 50vw;
    height:  3rem;
    background: black;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.container {
    position: relative;
}

.container p {
    color: white;
    font-family: sans-serif;
    font-size: 2.5rem;
    position: relative;
    padding-left: 5px;
}

/* Bars Animation CSS */

.bar1 {
  animation: move1 1.5s ease-out infinite forwards;
  animation-iteration-count: 1;
  animation-delay: 500ms;
  position: fixed;
  top: 30%;
  margin-bottom: 2px;
  left:  30%;
  z-index: 50;
}

@keyframes move1 {
  0% {
    transform: translateX(100vw);
    
  }
  100% {
    transform: translateX(-100%);
    left: 80%;
  }
}

.bar2 {
  animation: move2 1.5s ease-out infinite forwards;
  animation-iteration-count: 1;
  animation-delay: 1000ms;
  position: fixed;
  top: 36%;
  left:  30%;
  z-index: 999;
}

@keyframes move2 {
  0% {
    transform: translateX(100vw);

  }
  100% {
    transform: translateX(-100%);
    left: 65%;
  }
}

.bar3 {
  animation: move3 1.5s ease-out infinite forwards;
  animation-iteration-count: 1;
  animation-delay: 1500ms;
  position: fixed;
  top: 42%;
  left: 30%;
  z-index: 999;
}

@keyframes move3 {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(-100%);
    left: 52%;  
  }
}

CodePudding user response：

Just add default value for transform like this:

.bar1 {
  animation: move1 1.5s ease-out infinite forwards;
  animation-iteration-count: 1;
  animation-delay: 500ms;
  position: fixed;
  top: 30%;
  margin-bottom: 2px;
  left:  30%;
  z-index: 50;
  transform: translateX(100vw); // added
}
.bar2 {
  animation: move2 1.5s ease-out infinite forwards;
  animation-iteration-count: 1;
  animation-delay: 1000ms;
  position: fixed;
  top: 36%;
  left:  30%;
  z-index: 999;
  transform: translateX(100vw); // added
}
.bar3 {
  animation: move3 1.5s ease-out infinite forwards;
  animation-iteration-count: 1;
  animation-delay: 1500ms;
  position: fixed;
  top: 42%;
  left: 30%;
  transform: translateX(100vw); //added
  z-index: 999;
}