/**
 * 3つの三角形を上、右、左から中央に寄せる
 */

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

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

/****** 三角形(右) *******
 * 右下から中央に向ってにスライド
 ***********************/
@keyframes animation-2-right {
    0% {
        opacity: 0;
        transform: translate(5%, 15%);
    }

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

/****** 三角形(左) *******
 * 左下から中央に向ってスライド
 ***********************/
@keyframes animation-2-left {
    0% {
        opacity: 0;
        transform: translate(-10%, 5%);
    }

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

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