@charset "utf-8";
@import "../lib/ani/classes";
@import "../lib/ani/fade-in-up";
@import "../lib/ani/fade-out-down";

/**
 * ani 扩展
 */


/*
==============================================
slideDown
==============================================
*/


.slideDown{
  animation-name: slideDown;
  -webkit-animation-name: slideDown;
  @extend .ani;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  visibility: visible !important;
}

@keyframes slideDown {
  0% {
    transform: translateY(0%);
  }
  50%{
    transform: translateY(58%);
  }
  100% {
    transform: translateY(100%);
  }
}

@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(0%);
  }
  50%{
    -webkit-transform: translateY(58%);
  }
  100% {
    -webkit-transform: translateY(100%);
  }
}

/*
==============================================
slideUp
==============================================
*/

.slideUp{
  animation-name: slideUp;
  -webkit-animation-name: slideUp;
  @extend .ani;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  visibility: visible !important;
}

@keyframes slideUp {
  0% {
    transform: translateY(100%);
  }
  50%{
    transform: translateY(8%);
  }
  65%{
    transform: translateY(4%);
  }
  80%{
    transform: translateY(2%);
  }
  100% {
    transform: translateY(0%);
  }
}

@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(100%);
  }
  50%{
    -webkit-transform: translateY(8%);
  }
  65%{
    -webkit-transform: translateY(4%);
  }
  80%{
    -webkit-transform: translateY(2%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}