.animate.delay{
    transition-delay: .3s;
  }

  .animate.delay-more{
    transition-delay: .6s;
  }

の部分ですが、delay を使わずに

 .animate.delay{
    transition: .6s;
  }

  .animate.delay-more{
    transition: .9s;
  }

の表記にしてみたところ、順番にスライドはするのですが、delay を使うよりもスライドが出てくる間隔が短くなりました。

この二つの表記の違いがコンピューター上でどのように動いているのかがイメージできないのですが、ご教示いただけますでしょうか。