<body>
  <div>
    <span>N</span>
    <span>I</span>
    <span>C</span>
    <span>E</span>
    <span>&</span>
    <span>S</span>
    <span>I</span>
    <span>M</span>
    <span>P</span>
    <span>L</span>
    <span>E</span>
  </div>
</body>
/* STYLES */

@import url(https://fonts.googleapis.com/css?family=Bowlby+One);
::-moz-selection {
  background: #009688;
  color: #000;
}

::selection {
  background: #009688;
  color: #000;
}

body {
  font-family: 'Bowlby One';
  background-color: #181818;
  color: #000;
  font-size: 16px;
}

div {
  width: 80%;
  margin: auto;
  text-align: center;
  perspective: 800px;
  min-width: 320px;
  margin-top: 4em;
}

span {
  display: inline-block;
  color: #00796B;
  font-size: 4em;
  transform-origin: 50% 70%;
}

br {
  display: none;
}


/* Every second span */

span:nth-child(2n) {
  color: #009688;
}

span:nth-child(1) {
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) .2s both;
}

span:nth-child(2) {
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55).4s both;
}

span:nth-child(3) {
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55).6s both;
}

span:nth-child(4) {
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) .8s both;
}

span:nth-child(5) {
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1s both;
  padding: 0 20px;
  display: block;
}

span:nth-child(6) {
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1.2s both;
}

span:nth-child(7) {
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1.4s both;
}

span:nth-child(8) {
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1.6s both;
}

span:nth-child(9) {
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1.6s both;
}

span:nth-child(10) {
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1.8s both;
}

span:nth-child(11) {
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 2s both;
}


/* ANIMATION */

@keyframes flipUp {
  from {
    transform: rotateX(90deg);
  }
  to {
    transform: rotateX(0deg);
  }
}


/* RESPONSIVE STUFF */

@media screen and (min-width: 400px) {
  span {
    font-size: 4em;
  }
  span:nth-child(5) {
    margin: 0;
  }
}

@media screen and (min-width: 600px) {
  span {
    font-size: 5em;
  }
  span:nth-child(5) {
    margin: 0;
  }
}

@media screen and (min-width: 916px) {
  span {
    font-size: 6.2em;
  }
  span:nth-child(5) {
    display: inline-block;
    margin: 0;
    
  }
}
// None

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.