.leftIn{
  -webkit-animation: leftIn 0.2s forwards;
          animation: leftIn 0.2s forwards;
}
@-webkit-keyframes leftIn{
  0%{ -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; }
  100%{ -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; }
}
@keyframes leftIn{
  0%{ -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; }
  100%{ -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; }
}
.leftOut{
  -webkit-animation: leftOut 1s forwards;
          animation: leftOut 1s forwards;
}
@-webkit-keyframes leftOut{
  0%{ -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; }
  100%{ -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; }
}
@keyframes leftOut{
  0%{ -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; }
  100%{ -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; }
}

.rightIn{
  -webkit-animation: rightIn 0.2s forwards;
          animation: rightIn 0.2s forwards;
}
@-webkit-keyframes rightIn{
  0%{ -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; }
  100%{ -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; }
}
@keyframes rightIn{
  0%{ -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; }
  100%{ -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; }
}
.rightOut{
  -webkit-animation: rightOut 0.2s forwards;
          animation: rightOut 0.2s forwards;
}
@-webkit-keyframes rightOut{
  0%{ -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; }
  100%{ -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; }
}
@keyframes rightOut{
  0%{ -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; }
  100%{ -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; }
}

.topIn{-webkit-animation: topIn 1s forwards ;animation: topIn 1s forwards ; }
@-webkit-keyframes topIn{
  0%{ -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; }
  100%{ -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; }
}
@keyframes topIn{
  0%{ -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; }
  100%{ -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; }
}
.topOut{-webkit-animation: topOut 1s forwards ;animation: topOut 1s forwards ; }
@-webkit-keyframes topOut{
  0%{ -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; }
  100%{ -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; }
}
@keyframes topOut{
  0%{ -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; }
  100%{ -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; }
}

.bottomIn{-webkit-animation: bottomIn 0.2s  forwards ;animation: bottomIn 0.2s  forwards ; }
@-webkit-keyframes bottomIn{
  0%{ -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; }
  100%{ -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; }
}
@keyframes bottomIn{
  0%{ -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; }
  100%{ -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; }
}
.bottomOut{-webkit-animation: bottomOut 1s  forwards ;animation: bottomOut 1s  forwards ; }
@-webkit-keyframes bottomOut{
  0%{ -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; }
  100%{ -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; }
}
@keyframes bottomOut{
  0%{ -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; }
  100%{ -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; }
}
.smallIn{
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-animation: smallIn 0.5s forwards;
          animation: smallIn 0.5s forwards;
}
@-webkit-keyframes smallIn{
  from{ -webkit-transform: scale(0); transform: scale(0); opacity: 0;}
  to{-webkit-transform: scale(1);transform: scale(1); opacity: 1;}
}
@keyframes smallIn{
  from{ -webkit-transform: scale(0); transform: scale(0); opacity: 0;}
  to{-webkit-transform: scale(1);transform: scale(1); opacity: 1;}
}
.smallOut{
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-animation: smallOut 1s forwards;
          animation: smallOut 1s forwards;
}
@-webkit-keyframes smallOut{
  0%{-webkit-transform: scale(1);transform: scale(1); opacity: 1;}
  100%{ -webkit-transform: scale(0); transform: scale(0); opacity: 0;}
}
@keyframes smallOut{
  0%{-webkit-transform: scale(1);transform: scale(1); opacity: 1;}
  100%{ -webkit-transform: scale(0); transform: scale(0); opacity: 0;}
}

.bigIn{
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-animation: bigIn 0.5s forwards;
          animation: bigIn 0.5s forwards;
}
@-webkit-keyframes bigIn{
  from{ -webkit-transform: scale(2); transform: scale(2); opacity: 0;}
  to{-webkit-transform: scale(1);transform: scale(1); opacity: 1;}
}
@keyframes bigIn{
  from{ -webkit-transform: scale(2); transform: scale(2); opacity: 0;}
  to{-webkit-transform: scale(1);transform: scale(1); opacity: 1;}
}

.rolateIn{
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-animation: rolateIn 1s forwards;
          animation: rolateIn 1s forwards;
}
@-webkit-keyframes rolateIn{
  from{ -webkit-transform: rotate(180deg); transform: rotate(180deg); opacity: 0;}
  to{ -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1;}
}
@keyframes rolateIn{
  from{ -webkit-transform: rotate(180deg); transform: rotate(180deg); opacity: 0;}
  to{ -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1;}
}
.rolateOut{
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-animation: rolateOut 1s forwards;
          animation: rolateOut 1s forwards;
}
@-webkit-keyframes rolateOut{
  0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1;}
  100%{ -webkit-transform: rotate(180deg); transform: rotate(180deg); opacity: 0;}
}
@keyframes rolateOut{
  0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1;}
  100%{ -webkit-transform: rotate(180deg); transform: rotate(180deg); opacity: 0;}
}

.fadeIn{ -webkit-animation: fadeIn 0.4s forwards ; animation: fadeIn 0.4s forwards ; }
@-webkit-keyframes fadeIn{
  0%{ opacity: 0; }
  100%{ opacity: 1; }
}
@keyframes fadeIn{
  0%{ opacity: 0; }
  100%{ opacity: 1; }
}
.fadeOut{ -webkit-animation: fadeOut 0.4s forwards ; animation: fadeOut 0.4s forwards ; }
@-webkit-keyframes fadeOut{
  0%{ opacity: 1; }
  100%{ opacity: 0; }
}
@keyframes fadeOut{
  0%{ opacity: 1; }
  100%{ opacity: 0; }
}