title: After Using CSS animation other element not showing on the page
body: <p>Good day, guys, I tried to work on my code and I wasn't able to fix it on my own, the class .hello2 and .more are not showing on the page whereas it should appear below the id="flip" content, which happened it disappear the .hello2 and .more class element, it was my first time to use animation this time guys. here's the code that I been using. Looking forward</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.possible {
      color: #fff;
      text-align: center;
      letter-spacing: 10px;
      text-transform: uppercase;
      padding-top: 2rem;
      font-family: "Coiny", sans-serif;
  }
  
  .circle { 
      position: relative;
      border-radius: 50%;
      width: 30rem;
      height: 30rem;
      background-color: #6CA9A5;
      margin: 5rem auto;
      
  }
  
  .hello, .hello2 {
      position: relative;
      text-transform: uppercase;
      font-family: "Montserrat", sans-serif;
      font-weight: 900;
      letter-spacing: .2rem;
      font-size: 2.5rem;
      color: #fff;
      text-align: center;
      padding-top: 100px;
      /* z-index: 1; */
  }
  
  
  .hello span:hover {
      color: #f4511e;
      transition: .59s;
  }
  
  .circle a {
      font-size: 15px;
      text-decoration: none;
  }
  
  /* .more a {
      height: 150px;
      width: 500px;
      background-color: #fff;
  } */
  
  #container {
      color:#999;
      text-transform: uppercase;
      font-family: "Montserrat", sans-serif;
      font-size:36px;
      font-weight:bold;
      padding-top:180px;  
      position: relative;
      width:100%;
      bottom:45%;
      display:block;
      text-align: center;
    }
    
    #flip {
      height:60px;
      overflow:hidden;
    }
    
    #flip &gt; div &gt; div {
      border-radius: 30px;
      color:#fff;
      padding:4px 15px;
      height:45px;
      margin-bottom:45px;
      display:inline-block;
    }
    
    #flip div:first-child {
      animation: show 5s linear infinite;
    }
    
    #flip div div {
      background:#42c58a;
    }
    #flip div:first-child div {
      background:#4ec7f3;
    }
    #flip div:last-child div {
      background:#DC143C;
    }
    
    @keyframes show {
      0% {margin-top:-270px;}
      5% {margin-top:-180px;}
      33% {margin-top:-180px;}
      38% {margin-top:-90px;}
      66% {margin-top:-90px;}
      71% {margin-top:0px;}
      99.99% {margin-top:0px;}
      100% {margin-top:-270px;}
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="content"&gt;
              &lt;h1 class="possible"&gt;Everything is Possible&lt;/h1&gt;
              &lt;div class="circle"&gt; 
                  &lt;p class="hello"&gt;Let's Make &lt;/p&gt;
                  &lt;div id="container"&gt;
                      &lt;div id="flip"&gt;
                          &lt;div&gt;&lt;div&gt;wOrK&lt;/div&gt;&lt;/div&gt;
                          &lt;div&gt;&lt;div&gt;lifeStyle&lt;/div&gt;&lt;/div&gt;
                          &lt;div&gt;&lt;div&gt;Everything&lt;/div&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;p class="hello2"&gt;Awesome&lt;/p&gt;
                  &lt;a href="" class="more"&gt;Read More&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>