/* ========================================================================= 
 people.animation.css :: 

https://animate.style/    : animate.css 참조 
========================================================================= */

:root {
  --son-ani-duration : 300ms ; 
  --son-ani-ease     : ease-in ; 
}

/* ----------------------  css3 animations -------------  */

@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  animation-name: slideInLeft;
  animation-duration: var(--son-ani-duration) ; 
  animation-timing-function: var(--son-ani-ease) ;
  animation-delay: 0s;
}

@keyframes slideInRight {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  animation-name: slideInRight;
  animation-duration: var(--son-ani-duration) ; 
  animation-timing-function: var(--son-ani-ease) ;
  animation-delay: 0s;
}

@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  animation-name: slideInUp;
  animation-duration: var(--son-ani-duration) ; 
  animation-timing-function: ease-out;
  animation-delay: 0s;
}

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  animation-name: slideInDown;
  animation-duration: var(--son-ani-duration) ; 
  animation-timing-function: ease-out;
  animation-delay: 0s;
}

@keyframes slideOutLeft {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  animation-name: slideOutLeft;
  animation-duration: var(--son-ani-duration) ; 
  animation-timing-function: ease-out;
  animation-delay: 0s;
}

@keyframes slideOutRight {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(100%, 0, 0);
  }
}

.slideOutRight {
   animation-name: slideOutRight;
   animation-duration: var(--son-ani-duration) ; 
   animation-timing-function: ease-out;
   animation-delay: 0s;
}


@keyframes slideOutDown {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
  }
}

.slideOutDown {
  animation-name: slideOutDown;
  animation-duration: var(--son-ani-duration) ; 
  animation-timing-function: ease-out;
  animation-delay: 0s;
}

@keyframes slideOutUp {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  animation-name: slideOutUp;
  animation-duration: 200ms;
  animation-timing-function: ease-out;
  animation-delay: 0s;
}


@keyframes zoom_in {
  from { opacity: 0;  transform: scale3d(0.3, 0.3, 0.3);  }
  50% { opacity: 1;  }
}

.zoom_in { 
  animation-name    : zoom_in; 
  animation-duration: 800ms;
  animation-timing-function: ease-out;
  animation-delay   : 0s;
}

@keyframes zoom_out {
  from { opacity: 1;  }
  50% { opacity: 0;  transform: scale3d(0.3, 0.3, 0.3);  }
  to { opacity: 0;  }
}

.zoom_out { 
  animation-name: zoom_out; 
  animation-duration: 700ms;
  animation-timing-function: ease-out;
  animation-delay   : 0s;
}