<section>
  <h1>All unlocked</h1>
  <div class="grid">
  <div class="achieve unlocked tada">
    <h3>100<span>Donors</span></h3>
    <i class="fa fa-unlock-alt" aria-hidden="true"></i>
  </div>
  <div class="achieve unlocked tada">
    <h3>200<span>Donors</span></h3>
    <i class="fa fa-unlock-alt" aria-hidden="true"></i>
  </div>
  <div class="achieve unlocked tada">
    <h3>400<span>Donors</span></h3>
    <i class="fa fa-unlock-alt" aria-hidden="true"></i>
  </div>
  <div class="achieve unlocked tada">
    <h3>500<span>Donors</span></h3>
    <i class="fa fa-unlock-alt" aria-hidden="true"></i>
  </div>
</div>
</section>
<section>
  <h1>None Unlocked</h2>
  <div class="grid">
  <div class="achieve">
    <h3>100<span>Donors</span></h3>
    <i class="fa fa-lock" aria-hidden="true"></i>
  </div>
  <div class="achieve">
    <h3>200<span>Donors</span></h3>
    <i class="fa fa-lock" aria-hidden="true"></i>
  </div>
  <div class="achieve">
    <h3>400<span>Donors</span></h3>
    <i class="fa fa-lock" aria-hidden="true"></i>
  </div>
  <div class="achieve">
    <h3>500<span>Donors</span></h3>
    <i class="fa fa-lock" aria-hidden="true"></i>
  </div>
</div>
</section>
<section>
<h1>Different animations</h1>
  <h2>Bounce</h2>
  <div class="grid tiny">
  <div class="achieve unlocked bounce">
    <h3>100<span>Donors</span></h3>
    <i class="fa fa-lock" aria-hidden="true"></i>
  </div>
  <div class="achieve unlocked bounce">
    <h3>200<span>Donors</span></h3>
    <i class="fa fa-lock" aria-hidden="true"></i>
  </div>
  <div class="achieve unlocked bounce">
    <h3>400<span>Donors</span></h3>
    <i class="fa fa-lock" aria-hidden="true"></i>
  </div>
  <div class="achieve">
    <h3>500<span>Donors</span></h3>
    <i class="fa fa-lock" aria-hidden="true"></i>
  </div>
</div>
<h2>Tada!</h2>
<div class="grid tiny">
  <div class="achieve unlocked tada">
    <h3>100<span>Donors</span></h3>
    <i class="fa fa-lock" aria-hidden="true"></i>
  </div>
  <div class="achieve unlocked tada">
    <h3>200<span>Donors</span></h3>
    <i class="fa fa-lock" aria-hidden="true"></i>
  </div>
  <div class="achieve">
    <h3>400<span>Donors</span></h3>
    <i class="fa fa-lock" aria-hidden="true"></i>
  </div>
  <div class="achieve">
    <h3>500<span>Donors</span></h3>
    <i class="fa fa-lock" aria-hidden="true"></i>
  </div>
</div>
</section>

// Brand fonts, icons, and colors
@import 'https://fonts.googleapis.com/css?family=Lato|Libre+Baskerville';
@import 'http://weloveiconfonts.com/api/?family=fontawesome';
// fonts
$serif:'Libre Baskerville',
serif;
$sans-serif:'Lato',
sans-serif;
// blues
$navy:#00205c;
$light-blue:#7D8DAC;
$pale-blue:#e4eef3;
// reds
$red:#B30000;
// golds
$gold:#FFCC00;
$orange-gold:#FFB81D;
$light-gold:#FBF0D2;
$mute-gold:#C29E57;
// grays
$medium-gray:#DFD9D5;
$warm-gray:#847870;
// greens
$dark-green:#15514F;
$green:#5DBF0D;
$teal:#248F8B;
$aqua:#0099A9;
$mute-green:#4A7877;
body {
  font-family: $sans-serif;
  background-size: cover;
  text-align:center;
}
h1 {
  font-size: 3em;
  font-family:$serif;
  margin:0 0 1em 0;
}
h2 {
  font-size:2em;
}

section {
  max-width: 900px;
  margin: 5em auto 0 auto;
}

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: flex-start;
  margin-bottom: 2em;
  &.tiny {
    transform: scale(.5);

  }
}

.achieve {
  background-color: #a5a5a5;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='16' viewBox='0 0 12 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 .99C4 .445 4.444 0 5 0c.552 0 1 .45 1 .99v4.02C6 5.555 5.556 6 5 6c-.552 0-1-.45-1-.99V.99zm6 8c0-.546.444-.99 1-.99.552 0 1 .45 1 .99v4.02c0 .546-.444.99-1 .99-.552 0-1-.45-1-.99V8.99z' fill='%23000000' fill-opacity='0.025' fill-rule='evenodd'/%3E%3C/svg%3E");
  width: 19%;
  text-align: center;
  color: #fff;
  font-size: 3em;
  border-radius: 10px;
  padding: .5em 1%;
  line-height: 1.75em;
  text-shadow: 0 -1px rgba(0, 0, 0, .5);
  border-bottom: 2px solid #eee;
  box-shadow: 0 2px 1px rgba(0, 0, 0, .15);
  position: relative;
  h3 {
    line-height: 1em;
    margin-bottom: .25em;
  }
  span {
    display: block;
    font-size: .5em;
    margin-top: -.5em;
  }
  &.unlocked {
    background-color: $mute-green;
    &:nth-of-type(2) {
      animation-delay: .05s;
      background-color: $teal;
    }
    &:nth-of-type(3) {
      animation-delay: .1s;
      background-color: $aqua;
    }
    &:nth-of-type(4) {
      animation-delay: .15s;
      background-color: $red;
    }
  }
}

//bounce animation
@keyframes bounce {
  0% {
    transform: translate(0, 0);
    box-shadow: 0 2px 1px rgba(0, 0, 0, .15);
  }
  4% {
    transform: translate(0, -30px);
    box-shadow: 0 20px 15px rgba(0, 0, 0, .15);
  }
  8% {
    transform: translate(0, 0);
    box-shadow: 0 2px 1px rgba(0, 0, 0, .15);
  }
  12% {
    transform: translate(0, -30px);
    box-shadow: 0 20px 15px rgba(0, 0, 0, .15);
  }
  16%,
  100% {
    transform: translate(0, 0);
    box-shadow: 0 2px 1px rgba(0, 0, 0, .15);
  }
}
.bounce {
  animation: bounce 4s infinite;
}

// TADA
@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  3%, 6% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  9%, 15%, 21%, 27% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 3deg);
  }

  12%, 18%, 24% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg);
  }
  30%,
  100% {
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);
    transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 03deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  animation:tada 3s infinite;
}