/**
 * 3つの三角形を中央で1つに重ねておき、上、右、左の3方向に拡散させる
 */

/****** 三角形(上) *******
 * 上にスライド
 ***********************/
@keyframes animation-3-top {
    0% {
        opacity: 0;
        transform: translate(0, 10%);
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

/****** 三角形(右) *******
 * 右下にスライド
 ***********************/
@keyframes animation-3-right {
    0% {
        opacity: 0;
        transform: translate(-15%, -15%);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

/****** 三角形(左) *******
 * 左下にスライド
 ***********************/
@keyframes animation-3-left {
    0% {
        opacity: 0;
        transform: translate(4%, -30%);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

/**
 * クラス付与時にアニメーションを再生する
 */
.logo-animation-3-top {
    animation-name: animation-3-top;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
}
.logo-animation-3-right {
    animation-name: animation-3-right;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
}
.logo-animation-3-left {
    animation-name: animation-3-left;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
}