/* フワッと */
.fadeIn {
    animation-name: fadeInAnime;
    animation-fill-mode:backwards;
    animation-duration:3s;
    animation-iteration-count:1;
    animation-timing-function:ease;
    animation-delay: 1s;
    animation-direction:normal;



}
@keyframes fadeInAnime{
    0% {
    opacity: 0;
    }
    100% {
    opacity: 1;
    }
}

/* 上から */
.fadeDown{
    animation-name:fadeDownAnime;
    animation-duration:1s;
    animation-delay: 1s;
    animation-fill-mode:forwards;
    animation-iteration-count:1;
    opacity:0;
}




@keyframes fadeDownAnime{
    from {
        opacity: 0;
        transform: translateY(-100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* 下から */
.fadeUp{
    animation-name:fadeUpAnime;
    animation-duration: 1s;
    animation-delay: .3s;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
    opacity:0;
}
@keyframes fadeUpAnime {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 左上へ */
.flipLeftTop{
    animation-name:flipLeftTopAnime;
    animation-duration:1s;
    animation-delay: .3s;/*6で解説*/
    animation-iteration-count:1;/*4で解説*/
    animation-fill-mode:forwards;
    opacity:0;
}
@keyframes flipLeftTopAnime{
    from {
        transform: translate(-20px,80px) rotate(-15deg);
        opacity: 0;
    }
    to {
        transform: translate(0,0) rotate(0deg);
        opacity: 1;
    }
}


/* パタっと左へ */
.flipLeft{
    animation-name:flipLeftAnime;
    animation-duration:1s;
    animation-delay: .3s;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
    perspective-origin:left center;
    opacity:0;
}

@keyframes flipLeftAnime{
    from {
        transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
        opacity: 0;
    }
    to {
        transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
        opacity: 1;
    }
}
    

/*　時計回り */
/* .rotateRightZ{
    animation-name:rotateRightZAnime;
    animation-duration:3s;
    animation-fill-mode:forwards;
    animation-iteration-count:infinite;
}

@keyframes rotateRightZAnime{
from{
    transform: rotateZ(0);
    opacity: 1;
    }
to{
    transform: rotateZ(360deg);
    opacity: 1;
    }
} */
.rotateRightZ {
    animation: rotateRightZ 15s linear infinite;
}
@keyframes rotateRightZ {
    0%  {transform: rotate(0);}
    100%  {transform: rotate(360deg);}
}