Последовательность нескольких ключевых кадров анимации CSS и задержка не работают

Я создал 2 ключевых кадра. Первый ключевой кадр применяется ко всем элементам с классом .drop-in. И 2-й ключевой кадр специфичен для элемента с классом .look-at-me, когда закончилась анимация 1-го ключевого кадра.

Проблема в том, что, несмотря на то, что я добавил задержку для второго ключевого кадра для класса .look-at-me, все анимации по-прежнему происходят одновременно, а не применяются задержки.

Может ли кто-нибудь помочь мне это исправить?

Проверьте мою работу здесь: Codepen

HTML:

<ul class="box-list">
  <li>
    <div class="box drop-in">
      <h1>The Box</h1>
    </div>
  </li>
  <li>
    <div class="box drop-in">
      <h1>The Box</h1>
    </div>
  </li>
  <li>
    <div class="box drop-in look-at-me">
      <h1>The Box</h1>
    </div>
  </li>
  <li>
    <div class="box drop-in">
      <h1>The Box</h1>
    </div>
  </li>
</ul>

МЕНЬШЕ:

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #222;
}

.box-list {
  list-style: none;

  li {
    width: 140px;
    height: 145px;
    display: inline-block;
    margin-right: 24px;
    position: relative;

    &:last-child {
      margin-right: 0;
    }

    .drop-in {
      -webkit-animation: drop-in-anim 0.3s forwards;
      -moz-animation: drop-in-anim 0.3s forwards;
      animation: drop-in-anim 0.3s forwards;
      opacity: 0;
    }

    .look-at-me {
      -webkit-animation: drop-in-anim 0.3s forwards, look-at-me-anim 0.5s forwards;
      -moz-animation: drop-in-anim 0.3s forwards, look-at-me-anim 0.5s forwards;
      animation: drop-in-anim 0.3s forwards, look-at-me-anim 0.5s forwards;
      -webkit-animation-delay: 0s, 20s;
      -moz-animation-delay: 0s, 20s;
      animation-delay: 0s, 20s;
    }

    &:nth-child(1) {
      .drop-in {
        -webkit-animation-delay: 0.2s;
        -moz-animation-delay: 0.2s;
        animation-delay: 0.2s;
      }
    }
    &:nth-child(2) {
      .drop-in {
        -webkit-animation-delay: 0.3s;
        -moz-animation-delay: 0.3s;
        animation-delay: 0.3s;
      }
    }
    &:nth-child(3) {
      .drop-in {
        -webkit-animation-delay: 0.4s;
        -moz-animation-delay: 0.4s;
        animation-delay: 0.4s;
      }
    }
    &:nth-child(4) {
      .drop-in {
        -webkit-animation-delay: 0.5s;
        -moz-animation-delay: 0.5s;
        animation-delay: 0.5s;
      }
    }

    .box {
      padding: 6px;
      border: 1px solid #333;
      background: #fff;
      z-index: 5;
      text-align: center;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;

      &:hover,
      &.look-at-me {
        -webkit-transform: scale(1.3);
        -moz-transform: scale(1.3);
        transform: scale(1.3);
      }
    }
  }
}

@-webkit-keyframes drop-in-anim {
    0% {
        opacity: 0;
        position: absolute;
        top: 50px;
    }
    100% {
        opacity: 1;
        top: 0;
    }
}
@-moz-keyframes drop-in-anim {
    0% {
        opacity: 0;
        position: absolute;
        top: 50px;
    }
    100% {
        opacity: 1;
        top: 0;
    }
}
@keyframes drop-in-anim {
    0% {
        opacity: 0;
        position: absolute;
        top: 50px;
    }
    100% {
        opacity: 1;
        top: 0;
    }
}

@-webkit-keyframes look-at-me-anim {
    50% { -webkit-transform: scale(1.4); }
    75% { -webkit-transform: scale(1.2); }
    100% { -webkit-transform: scale(1.3); margin: 0 12px; }
}
@-moz-keyframes look-at-me-anim {
    50% { -moz-transform: scale(1.4); }
    75% { -moz-transform: scale(1.2); }
    100% { -moz-transform: scale(1.3); margin: 0 12px; }
}
@keyframes look-at-me-anim {
    50% { transform: scale(1.4); }
    75% { transform: scale(1.2); }
    100% { transform: scale(1.3); margin: 0 12px; }
}