/**
 * 上の三角形を開始位置として時計回りに三角形を出現させる
 */

/********** 上 **********
 * 初期位置で固定(動かない)
 ***********************/
@keyframes animation-1-top {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/********** 右 **********
 * 右下に移動(初期位置は上△に重ねておく)
 ***********************/
@keyframes animation-1-right {
    0% {
        opacity: 0;
        transform: translate(-15%, -25%);
    }

    33% {
        opacity: 0;
        transform: translate(-15%, -25%);
    }

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

/********** 左 **********
 * 左下に移動(初期位置は右△に重ねておく)
 ***********************/
@keyframes animation-1-left {
    0% {
        opacity: 0;
        transform: translate(19%, -15%);
    }

    66% {
        opacity: 0;
        transform: translate(19%, -15%);
    }

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

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