.fade-show{
    filter: blur(50px);
    opacity: 0;
    transition: all 1s ease 0s;
}
.fade-show.on{
    filter: blur(0);
    opacity: 1;
}
.fade-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all .6s ease 0.2s;
}
.fade-left.on {
  opacity: 1;
  transform: translateX(0);
}
.fade-left.on {
  opacity: 1;
  transform: translateX(0);
}
.fade-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all .6s ease 0.2s;
}
.fade-right.on {
  opacity: 1;
  transform: translateX(0);
}
.fade-up{
  opacity: 0;
  transform: translateY(-50px);
  transition: all 1s ease 0.2s;
}
.fade-up.on{
  opacity: 1;
  transform: translateY(0);
}






/* ------------------------ */
/* 쌤이 알려준 애니메이션 효과 */

/* 왼쪽에서 오른쪽으로 나타나는 효과 */
.ani1{
    transition: all 1s ease 0s;
    opacity: 0;
    transform: translateX(-20px);
}
.ani1.on{
    opacity: 1;
    transform: translateX(0);
}

/* 제자리에서 나타나는 효과 */
.ani2{
    opacity: 0;
    transition: all .5s ease 0s;
    transform: scale(0.8);
}
.ani2.on{
    opacity: 1;
    transform: scale(1);
}