/* revealContentを最初は消しておく */
.revealContent {
    opacity: 0;
}

/* revealActiveクラスが追加されて.3s後に表示する */
.revealActive .revealContent {
    -webkit-transition-delay: .3s;
         -o-transition-delay: .3s;
            transition-delay: .3s;
    opacity: 1;
}

.revealItem {
    display: block;
    position: absolute;
    overflow: hidden;
}

/* before擬似要素の黒いblockにanimationをつけておく */
.revealItem.revealActive::before {
    -webkit-animation: hideFromLeft .3s forwards, showFromLeft .3s forwards .3s;
            animation: hideFromLeft .3s forwards, showFromLeft .3s forwards .3s;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    margin: 1px;
}

/* before擬似要素を左から右にスライドイン */
@-webkit-keyframes hideFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0%);
    }
}
@keyframes hideFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0%);
    }
}

/* before擬似要素を左から右にスライドアウト */
@-webkit-keyframes showFromLeft {
    0% {
        -webkit-transform: translateX(0%);
                transform: translateX(0%);
    }
    100% {
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
    }
}

@keyframes showFromLeft {
    0% {
        -webkit-transform: translateX(0%);
                transform: translateX(0%);
    }
    100% {
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
    }
}

/* 画像を使うときはvertical-align bottomをしないと下に余白ができてしまうので注意！！ */
.revealImg {
    width: 300px;
    height: 200px;
    -o-object-fit: cover;
       object-fit: cover;
    vertical-align: bottom;
}