/*淡入*/
@-webkit-keyframes fade {
  from {
    opacity: 0;
   
  }

  to {
    opacity: 1;

  }
}
@keyframes fade {
 from {
    opacity: 0;
   
  }

  to {
    opacity: 1;

  }
}

/*下方進入*/
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 5%, 0);
    transform: translate3d(0, 5%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 5%, 0);
    transform: translate3d(0, 5%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}


/*高度*/
@-webkit-keyframes height {
  from {
    height: 0;
  }

  to {
     height: 100%;
  }
}

@keyframes height {
  from {
    height: 0;
  }

  to {
     height: 100%;
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0%, 0);
    transform: translate3d(-10%, 0%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}