/* 右上へ */
.flipRightTop{
    animation-name:flipRightTopAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
}
    
@keyframes flipRightTopAnime{
    from {
       transform: translate(-20px,80px) rotate(25deg);
       opacity: 0;
    }
    
    to {
       transform: translate(0,1) rotate(0deg);
      opacity: 1;
    }
}
    
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
     
    .flipDownTrigger,
    .flipLeftTrigger,
    .flipLeftTopTrigger,
    .flipRightTrigger,
    .flipRightTopTrigger{
     opacity: 0;
}


/* 左上へ */
.flipLeftTop{
    animation-name:flipLeftTopAnime;
    animation-duration:1s;
    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;
    }
}