@import url('./_mixins.less');
@import url('./_theme.less');

// fade-in / fade-out

.anim-fadein {
  visibility: hidden;
  opacity: 0;
}

.anim-fadein-active {
  visibility: visible;
  .transition(@modalDuration);
  opacity: 1;
}

.anim-fadeout {
  opacity: 1;
  .transition(@modalDuration)  
}

.anim-fadeout-active {
  opacity: 0;
}

// slide-in / slide-out

.anim-slidein {
  .translate3d(0,100%,0);
  transition-property: transform;
}

.anim-slidein-active {
  .translate3d(0,0,0);
  .transition(400ms);  
}

.anim-slideout {
  .translate3d(0,0,0);
  transition-property: transform;    
}

.anim-slideout-active {
  .translate3d(0,100%,0);
  .transition(400ms);  
}


// bounce-in / bouce-out

.anim-bouncein {
  opacity: 0;
  .transform(translate3d(0,0,0) scale(1.185));
  transition-property: transform, opacity;
}

.anim-bouncein-active {
  opacity: 1;
  .transform(translate3d(0,0,0) scale(1));
  .transition(@modalDuration);  
}

.anim-bounceout {
  opacity: 1;
  .transform(translate3d(0,0,0) scale(1));
  transition-property: transform, opacity;  
}

.anim-bounceout-active {
  opacity: 0;
  .transition(@modalDuration);  
  .transform(translate3d(0,0,0) scale(1));
}