<div class='wrapper'>
  
  <div class='bottom'>
    <p>
      No more cards!
    </p>
  </div>
  
  <input type='checkbox' checked />
  <article>
    <p>
      If you have 3 quarters, 4 dimes, and 4 pennies, you have $1.19. You also have the largest amount of money in coins without being able to make change for a dollar.
    </p> 
  </article>
  
  <input type='checkbox' checked />
  <article> 
    <p>
      The numbers '172' can be found on the back of the U.S. $5 dollar bill in the bushes at the base of the Lincoln Memorial.
    </p>
  </article> 
   
  <input type='checkbox' checked />
  <article> 
    <p>
      President Kennedy was the fastest random speaker in the world with upwards of 350 words per minute.
    </p> 
  </article>
   
  <input type='checkbox' checked />
  <article> 
    <p>
      In the average lifetime, a person will walk the equivalent of 5 times around the equator.
    </p> 
  </article>
   
  <input type='checkbox' checked />
  <article> 
    <p>
      Odontophobia is the fear of teeth.
    </p> 
  </article>
   
  <input type='checkbox' checked />
  <article> 
    <p>
      The 57 on Heinz ketchup bottles represents the number of varieties of pickles the company once had.
    </p> 
  </article>
   
  <input type='checkbox' checked />
  <article> 
    <p>
      In the early days of the telephone, operators would pick up a call and use the phrase, "Well, are you there?". It wasn't until 1895 that someone suggested answering the phone with the phrase "number please?"
    </p> 
  </article>
   
  <input type='checkbox' checked />
  <article> 
    <p>
      The surface area of an average-sized brick is 79 cm squared.
    </p> 
  </article>
   
  <input type='checkbox' checked />
  <article> 
    <p>
      According to suicide statistics, Monday is the favored day for self-destruction.
    </p> 
  </article>
   
  <input type='checkbox' checked />
  <article> 
    <p>
      Cats sleep 16 to 18 hours per day.
    </p> 
  </article>
  
  <div id='next-btn'>Next</div>
  
</div>
*{ box-sizing: border-box; }
html, body{ height: 100%; margin: 0; }
body{
  display: flex;
  background: #eee;
  color: #212121;
  justify-content: center;
  align-items: center;
  font: 20px/1.7 'RobotoDraft', sans-serif;
}

.wrapper{
  position: relative;
  width: 960px;
  height: 128px;
}

input{
  position: absolute;
  margin: 0 auto;
  bottom: -64px;
  left: 0;
  right: 0;
  width: 96px;
  height: 48px;
  cursor: pointer;
}
input:hover ~ #next-btn{ background: #1E88E5; }
input:active ~ #next-btn{ background: #1976D2; }
input:not(:checked){ display: none; }
p{
  margin: 0;
  text-align: justify;
}
input:not(:checked) + article{ animation: out 400ms cubic-bezier(.4,.0,.23,1) forwards; }
article{
  display: flex;
  position: absolute;
  align-items: center;
  background: #fff;
  width: 100%;
  height: 128px;
  padding: 0 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  border-radius: 2px;
}

.bottom{
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 128px;
}
.bottom > p{
  font-size: 2em;
  color: #c7c7c7;
  text-shadow: 0 -1px 0 #999;
  user-select: none;
  cursor: default;
}


input:checked ~ #next-btn{ display: flex; }
#next-btn{
  position: absolute;
  display: none;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: #2196F3;
  width: 96px;
  height: 48px;
  left: 0;
  right: 0;
  bottom: -64px;
  margin: 0 auto;
  text-align: center;
  pointer-events: none;
}
#next-btn:after{
  content: counter(num) " left";
  position: absolute;
  width: 100%;
  left: 96px;
  color: #888;
}

input:checked{ counter-increment: num; }

@keyframes out{
  0%{ transform: translate3d(0,0,0) scale(1);  }
  33%{ transform: translate3d(0,0,0) scale(1.25); box-shadow: 0 32px 32px rgba(0,0,0,.16); }
  100%{ transform: translate3d(0,calc(-50vh - 100%),0); }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js