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

  to {
    opacity: 1;

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

  to {
    opacity: 1;

  }
}
/*右邊快速進入*/
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
  }

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

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

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
/*左邊進入*/
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }

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

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

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

/*上方進入*/

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

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

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

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
/*上方離開*/

@-webkit-keyframes fadeInout {
  from {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }
}

@keyframes fadeInout {
  from {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }
}

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

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

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

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

/*top進入*/
@-webkit-keyframes top {
  from {
    top: -50px;
  }

  to {
 
    top: 0;
  }
}

@keyframes top {
  from {
    top: -50px;
  }

  to {
 
    top: 0;
  }
}
/*左移進入*/
@-webkit-keyframes left {
  from {
    left: 0px;
  }

  to {
   left: -80px;
  }
}

@keyframes left {
  from {
    left: 0px;
  }

  to {
    left: -80px;
  }
}

/*bottom進入*/
@-webkit-keyframes bottom {
  from {
    bottom: 10px;
  }

  to {
    bottom: -7.5px;
  }
}

@keyframes bottom {
 from {
    bottom: 10px;
  }
  to {
    bottom: -7.5px;
  }
}

/*下方上移*/
@-webkit-keyframes top-up {
  from {
    top: 0px;
  }

  to {
 
    top: -50px;
  }
}

@keyframes top-up{
  from {
    top: 0px;
  }

  to {
 
    top: -50px;
  }
}

/*線條打開*/
@-webkit-keyframes line {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes line {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}
/*線條打開2*/
@-webkit-keyframes line2 {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

@keyframes line2 {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

/*旋轉*/
@-webkit-keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(270deg);
  }
}


@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(270deg);
  }
}

/*縮小放大*/
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}
/*放大縮小*/



  @-webkit-keyframes pulseS {
    0% {
      opacity: 0;
      -webkit-transform:scale(1.3, 1.3);
      -moz-transform:scale(1.3, 1.3); 
      -ms-transform:scale(1.3, 1.3);
      -o-transform:scale(1.3, 1.3);
      transform:scale(1.3, 1.3)
    }
    100% {
      opacity: 1;
      -webkit-transform:scale(1, 1); 
      -moz-transform:scale(1, 1); 
      -ms-transform:scale(1, 1); 
      -o-transform:scale(1, 1); 
      transform:scale(1, 1)
    }
  }
  @-moz-keyframes pulseS {
    0% {
      opacity: 0;
      -webkit-transform:scale(1.3, 1.3);
      -moz-transform:scale(1.3, 1.3); 
      -ms-transform:scale(1.3, 1.3);
      -o-transform:scale(1.3, 1.3);
      transform:scale(1.3, 1.3)
    }
    100% {
      opacity: 1;
      -webkit-transform:scale(1, 1); 
      -moz-transform:scale(1, 1); 
      -ms-transform:scale(1, 1); 
      -o-transform:scale(1, 1); 
      transform:scale(1, 1)
    }
  }
  @-o-keyframes pulseS {
     0% {
      opacity: 0;
      -webkit-transform:scale(1.3, 1.3);
      -moz-transform:scale(1.3, 1.3); 
      -ms-transform:scale(1.3, 1.3);
      -o-transform:scale(1.3, 1.3);
      transform:scale(1.3, 1.3)
    }
    100% {
      opacity: 1;
      -webkit-transform:scale(1, 1); 
      -moz-transform:scale(1, 1); 
      -ms-transform:scale(1, 1); 
      -o-transform:scale(1, 1); 
      transform:scale(1, 1)
    }
  }

  @keyframes pulseS {
     0% {
      opacity: 0;
      -webkit-transform:scale(1.3, 1.3);
      -moz-transform:scale(1.3, 1.3); 
      -ms-transform:scale(1.3, 1.3);
      -o-transform:scale(1.3, 1.3);
      transform:scale(1.3, 1.3)
    }
    100% {
      opacity: 1;
      -webkit-transform:scale(1, 1); 
      -moz-transform:scale(1, 1); 
      -ms-transform:scale(1, 1); 
      -o-transform:scale(1, 1); 
      transform:scale(1, 1)
    }
  }

/*滑鼠移標*/
@-webkit-keyframes mouse {
  form {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
    
  }

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

@keyframes mouse {
   form {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
    
  }

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