.s-up, .s-left, .s-right 
{opacity: 0; transition: opacity 1s ease, transform 1s ease, -webkit-transform 1s ease;}

/* 방향별 */
.s-up 
{transform: translateY(50px);}
.s-left 
{transform: translateX(-50px);}
.s-right 
{transform: translateX(50px);}

.s-up.on 
{transform: translateY(0); opacity: 1; transition-delay: .1s;}
.s-left.on, .s-right.on
{transform: translateX(0); opacity: 1; transition-delay: .1s;}

/* 따로 지연주고 싶을 때 */
.s-up.delay1 {transition-delay: .1s;}
.s-up.delay2 {transition-delay: .2s;}
.s-up.delay3 {transition-delay: .3s;}
.s-up.delay4 {transition-delay: .4s;}
.s-up.delay5 {transition-delay: .5s;}
.s-up.delay6 {transition-delay: .6s;}
.s-up.delay7 {transition-delay: .7s;}
.s-up.delay8 {transition-delay: .8s;}
.s-up.delay9 {transition-delay: .9s;}
.s-up.delay10 {transition-delay: 1s;}