/* 画面外にいる状態 */
.fadein {
    opacity : 0.1;
    transform : translate(0, 50px);
    transition : all 600ms ease-in-out;
}
/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}
/* 2つ目の要素に200msのdelayをかける */
div .fadein:nth-of-type(2) {
    -moz-transition-delay:200ms;
    -webkit-transition-delay:200ms;
    -o-transition-delay:200ms;
    -ms-transition-delay:200ms;
}
/* 3つ目の要素に400msのdelayをかける */
div .fadein:nth-of-type(3) {
    -moz-transition-delay:400ms;
    -webkit-transition-delay:400ms;
    -o-transition-delay:400ms;
    -ms-transition-delay:400ms;
}
/* モバイル表示時にdiv要素の表示順が入れ替わる（order）対策 */
@media screen and (max-width: 767px) {
    div .order-1,.fadein {
    -moz-transition-delay:200ms;
    -webkit-transition-delay:200ms;
    -o-transition-delay:200ms;
    -ms-transition-delay:200ms;
    }
    div .order-2,.fadein {
    -moz-transition-delay:400ms;
    -webkit-transition-delay:400ms;
    -o-transition-delay:400ms;
    -ms-transition-delay:400ms;
    }
}