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

/*淡入0.3*/
@-webkit-keyframes fade_3 {
    from {
        opacity: 0;
    }
    to {
        opacity: .3;
    }
}
@keyframes fade_3 {
    from {
        opacity: 0;
    }
    to {
        opacity: .3;
    }
}

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

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

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-20%, 0, 0);
        transform: translate3d(-20%, 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 fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 50%, 0);
        transform: translate3d(0, 50%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 50%, 0);
        transform: translate3d(0, 50%, 0);
    }

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

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

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

    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

/*bottom進入*/
@-webkit-keyframes bottom {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0px);
        opacity: 1;
    }
}
  
@keyframes bottom {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
  
    to {
        transform: translateY(0px) ;
        opacity: 1;
    }
}

/*特製左邊進入*/
@-webkit-keyframes fadeInLeft_r {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-20%, 0, 0) rotateY(180deg);
        transform: translate3d(-20%, 0, 0) rotateY(180deg);
    }

    to {
        opacity: 1;
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
}
@keyframes fadeInLeft_r {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-20%, 0, 0) rotateY(180deg);
        transform: translate3d(-20%, 0, 0) rotateY(180deg);
    }

    to {
        opacity: 1;
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
}
/*特製左邊進入*/
@-webkit-keyframes fadeInRight_r {
    from {
        opacity: 0;
        -webkit-transform: translate3d(20%, 0, 0) rotateY(180deg);
        transform: translate3d(20%, 0, 0) rotateY(180deg);
    }

    to {
        opacity: 1;
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
}
@keyframes fadeInRight_r {
    from {
        opacity: 0;
        -webkit-transform: translate3d(20%, 0, 0) rotateY(180deg);
        transform: translate3d(20%, 0, 0) rotateY(180deg);
    }

    to {
        opacity: 1;
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
}
/*放大進*/
@-webkit-keyframes fadeInScale {
    from {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes fadeInScale {
    from {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
/*放大進Max*/
@-webkit-keyframes InScaleMAX {
    from {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes InScaleMAX {
    from {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
/*放大進Max*/
@-webkit-keyframes leftInMax {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0%, 20%, 0);
        transform: translate3d(0%, 20%, 0);
    }

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

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


@-webkit-keyframes arrowInDown {
    from {
        transform: translate3D( 0, -15px, 0) rotateZ(-45deg);
    }
    to {
        transform: rotateZ(-45deg);
    }
}
@keyframes arrowInDown{
    from {
        transform: translate3D( 0, -15px, 0) rotateZ(-45deg);
    }
    to {
        transform: rotateZ(-45deg);
    }
}