YzKROrv

index.html

<div id="wrapper">
  <div class="box">KEKKECONTENT</div>
  <div class="box">KEKKECONTENT</div>
  <div class="box">KEKKECONTENT</div>
  <div class="box">KEKKECONTENT</div>
  <div class="box">KEKKECONTENT</div>
  <div class="box">KEKKECONTENT</div>
  <div class="box">KEKKECONTENT</div>
</div>

style.css

#wrapper {
  background: #eee;
  padding: 20px;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.box {
  background-color: red;
  color: white;
  padding: 20px;
  margin: 10px;
  border-radius: 20px;
     -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s infinite;
}

@keyframes fadein {
    from { 
      opacity: 0; 
      margin-top: 30px;
    }
  
    to { 
      opacity: 1;       
      margin-top: 0;
    }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
      from { 
      opacity: 0; 
      margin-top: 30px;
    }
  
    to { 
      opacity: 1;       
      margin-top: 0;
    }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
      from { 
      opacity: 0; 
      margin-top: 30px;
    }
  
    to { 
      opacity: 1;       
      margin-top: 0;
    }
}

/* Internet Explorer */
@-ms-keyframes fadein {
      from { 
      opacity: 0; 
      margin-top: 30px;
    }
  
    to { 
      opacity: 1;       
      margin-top: 0;
    }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
       from { 
      opacity: 0; 
      margin-top: 30px;
    }
  
    to { 
      opacity: 1;       
      margin-top: 0;
    }
}

yzkrorv.markdown

YzKROrv

A Pen by TheAnarchoX on CodePen.

License.