title: How do I make the still image of the animation leave the screen?
body: <p>Sorry if the wording of the question was odd! Right now I coded an animation in which a train only runs every 20 minutes. I'm using <code>animation-delay</code> for 1200s. But the problem is that when the screen is waiting for the 20 minutes, it shows a still image of the train, but I want the train to not be in the screen until the animation time is starting as it should be when someone is waiting for a train at a platform. How can I achieve this? Any tips are appreciated!</p>
  <p>---------CSS---------</p>
  <pre class="lang-css prettyprint-override"><code>@keyframes gradient {
  0% {
      background-position: 0% 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0% 50%;
  }
  }
  
  .platform {
    width: 100%;
    height: 200px;
    background-color: black;
  
  }
  
  #wholetrain {
    width: auto;
    white-space: nowrap;
    overflow-x: hidden;
  }
  
  #trainwrapper {
    min-width: 100px;
    width: auto !important;
    width: 100px;
  }
  
  .train {
    width: 400px;
    height: 150px;
    background: linear-gradient(to bottom right, #ffcc00,#7575a3);
    border-radius: 10px;
    display: inline-block;
    animation-name: chug;
    animation-duration: 10s;
    animation-iteration-count: 1;
    animation-delay: 1200s;
  }
  </code></pre>
  <p>------- HTML ------</p>
  <pre><code>&lt;div class=&quot;d-flex flex-column justify-content-center align-items-center&quot;&gt;
  
   &lt;div class=&quot;background&quot;&gt;&lt;/div&gt;
  
  &lt;div id=&quot;trainwrapper&quot;&gt;
  &lt;div id=&quot;wholetrain&quot;&gt;
    &lt;div class=&quot;train&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;train2&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;train3&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;train4&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;train5&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;train6&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;train7&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;train8&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;train9&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;train10&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;platform&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;card&quot;&gt;
  &lt;span id=&quot;countdown&quot; style=&quot;font-weight: bold;&quot;&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>