/*****************
* Short Animations
*******************/

/*********************
* UpShort
*********************/
@-webkit-keyframes UpShort { 
    0% { 
        -webkit-transform: translateY(20px); 
    } 
    100% { 
        -webkit-transform: translateY(0); 
    } 
} 

@keyframes UpShort { 
    0% {   
        transform: translateY(20px); 
    } 
    100% {         
        transform: translateY(0); 
    } 
} 
.UpShort{
    -webkit-transform: translateY(20px); 
    transform: translateY(20px); 
}
.UpShort.go { 
    -webkit-animation-name: UpShort; 
    animation-name: UpShort; 
}

/*********************
* DownShort
*********************/
@-webkit-keyframes DownShort { 
    0% { 
        -webkit-transform: translateY(-20px); 
    } 
    100% {   
        -webkit-transform: translateY(0); 
    } 
} 

@keyframes DownShort { 
    0% { 
        
        transform: translateY(-20px); 
    } 
    100% { 
        
        transform: translateY(0); 
    } 
} 
.DownShort{
    -webkit-transform: translateY(-20px); 
    transform: translateY(-20px); 
}
.DownShort.go { 
    -webkit-animation-name: DownShort; 
    animation-name: DownShort; 
}

/*********************
* RightShort 
*********************/
@-webkit-keyframes RightShort { 
    0% { 
        -webkit-transform: translateX(20px); 
    } 
    100% { 
        
        -webkit-transform: translateX(0); 
    } 
} 
@keyframes RightShort { 
    0% { 
        
        transform: translateX(20px); 
    } 
    100% { 
        
        transform: translateX(0); 
    } 
} 
.RightShort { 
    -webkit-transform: translateX(20px);  
    transform: translateX(20px); 
}
.RightShort.go { 
    -webkit-animation-name: RightShort; 
    animation-name: RightShort; 
}

/*********************
* LeftShort 
*********************/
@-webkit-keyframes LeftShort { 
    0% {        
        -webkit-transform: translateX(-20px); 
    } 
    100% {         
        -webkit-transform: translateX(0); 
    } 
} 
@keyframes LeftShort { 
    0% {         
        transform: translateX(-20px); 
    } 
    100% { 
        
        transform: translateX(0); 
    } 
} 
.LeftShort {
    -webkit-transform: translateX(-20px);  
    transform: translateX(-20px); 
}
.LeftShort.go { 
    -webkit-animation-name: LeftShort; 
    animation-name: LeftShort; 
}

/*********************
* BgLeft
*********************/
/* bg must set max-width */
/* 不適用置中 */
@-webkit-keyframes BgLeft { 
    0% { 
        width: 0px;
    } 
    100% { 
        width: 100%;
    } 
} 

@keyframes BgLeft { 
    0% {   
        width: 0px;
    } 
    100% {         
        width: 100%;
    } 
} 
.BgLeft{
	width: 0px;
	background-position: top right;
}
.BgLeft.go { 
    -webkit-animation-name: BgLeft; 
    animation-name: BgLeft; 
}
/*********************
* BgRight
*********************/
/* bg must set max-width */
/* 不適用置中 */
@-webkit-keyframes BgRight { 
    0% { 
        width: 0px;
    } 
    100% { 
        width: 100%;
    } 
} 

@keyframes BgRight { 
    0% {   
        width: 0px;
    } 
    100% {         
        width: 100%;
    } 
} 
.BgRight{
	width: 0px;
	background-position: top left;
}
.BgRight.go { 
    -webkit-animation-name: BgRight; 
    animation-name: BgRight; 
}

/*********************
* ZoomIn
*********************/
@keyframes ZoomIn { 
    0% {   
        transform: scale(1.1);
    } 
    100% {         
        transform: scale(1);
    } 
}
.ZoomIn {
    transform: scale(1.1);
}
.ZoomIn.go { 
    -webkit-animation-name: ZoomIn; 
    animation-name: ZoomIn; 
}

/*********************
* Blur
*********************/
@keyframes Blur { 
    0% {   
/*        transform: scale(1.1);*/
        filter: blur(5px);
    } 
    100% {         
/*        transform: scale(1);*/
        filter: blur(0px);
    } 
}
.Blur {
/*    transform: scale(1.1);*/
    filter: blur(5px);
}
.Blur.go { 
    -webkit-animation-name: Blur; 
    animation-name: Blur; 
}

/**********
* Fade Out *
**********/ 
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        display: block;
    }
}
.fadeOut {
    opacity: 1;
}
.fadeOut.go { 
    animation-name: fadeOut; 
}

/**********
* Star Show *
**********/ 
@keyframes StarShow {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%);
    }
    50% {
        opacity: 1;
        transform: translate(0, 0);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}
.StarShow {
    opacity: 0;
    transform: translate(-50%, -50%);
}
.StarShow.go { 
    animation-name: StarShow; 
}

/**********
* Star Show2 *
**********/ 
@keyframes StarShow2 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%);
    }
    20% {
        opacity: 1;
    }
    90% {
        opacity: 0;
        transform: translate(50%, 70%);
    }
}
.StarShow2 {
    opacity: 0;
    transform: translate(-50%, -50%);
}
.StarShow2.go { 
    animation-name: StarShow2; 
}

/**********
* Tit Show *
**********/ 
@keyframes TitShow {
    0% {
        opacity: 0;
        transform: translate(50%, -50%);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}
.TitShow {
    opacity: 0;
    transform: translate(50%, -50%);
}
.TitShow.go { 
    animation-name: TitShow; 
}

/*********************
* StoneMove
*********************/
@keyframes StoneMove {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    50% {
        opacity: 1;
        transform: translateY(0);
    }

    70% {
        transform: translateY(0) translateX(-6px);
    }

    80% {
        transform: translateY(0) translateX(5px);
    }

    88% {
        transform: translateY(0) translateX(-3px);
    }

    94% {
        transform: translateY(0) translateX(2px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) translateX(0);
    }
} 
.StoneMove{
    opacity: 0; 
    -webkit-transform: translateY(20px); 
    transform: translateY(20px); 
}
.StoneMove.go { 
    -webkit-animation-name: StoneMove; 
    animation-name: StoneMove; 
}

/**********
* StoneMove2 *
**********/ 
@keyframes StoneMove2 {
    0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(200%, 200%) rotate(30deg) scale(0.8);
  }

}
.StoneMove2 {
/*    opacity: 0;*/
    transform: translate(-50%, -50%);
}
.StoneMove2.go { 
    animation-name: StoneMove2; 
}