:root{
    --time:2s;/*でてくる動きの秒数*/
}
/* 下からでてくる  */
.fadeIn_up {
    opacity: 0;
    transform: translate(0, 50%);
    transition: var(--time);
}
.fadeIn_up.is-show {
    transform: translate(0, 0);
    opacity: 1;
}
/* 右からでてくる  */
.fadeIn_right {
    opacity: 0;
    transform: translate(50%, 0);
    transition: var(--time);
}
.fadeIn_right.is-show {
    transform: translate(0, 0);
    opacity: 1;
}
/* 左からでてくる */
.fadeIn_left {
    opacity: 0;
    transform: translate(-50%, 0);
    transition: var(--time);
}
.fadeIn_left.is-show {
    transform: translate(0, 0);
    opacity: 1;
}
/*アニメーション*/
.fadeIn_ani {
    opacity: 0;
}
.fadeIn_ani.is-show {
    animation: mov;/*movという名前のアニメーションを実行*/
    animation-duration: var(--time);/*アニメーションの秒数*/
    animation-fill-mode: forwards;/*アニメーション終了時に最後の状態を維持*/
    animation-delay: 0.5s;/*アニメーションの始まる時間を遅らせる*/
    animation-timing-function: ease-in-out;/*アニメーションの動きの緩急*/

    transform-origin: center top;/*回転軸の移動*/
}
/*動きの定義（自由に変更）*/ 
@keyframes mov {
    0%{
        opacity: 0;
        transform: rotate(0);
    }
    25%{
        opacity: 0.5;
        transform: rotate(45deg);
    }
    50%{
        opacity: 1;
        transform: rotate(-45deg);
    }
    75%{
        opacity: 1;
        transform: rotate(45deg);
    }
    100%{
        opacity: 1;
        transform: rotate(0deg);
    }
}