@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes rotateRing {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes scale {
    0%{
        transform: scale(1);
        opacity:1;
    }
    40% {
        opacity:1;
        transform: scale(0.8);
    }
    80% {
        opacity:1;
        transform: scale(1.2);
    }
}

@keyframes scale2 {
    0%{
        transform: scale(1);
        opacity:1;
    }
    40% {
        opacity:1;
        transform: scale(0.9);
    }
    80% {
        opacity:1;
        transform: scale(1.1);
    }
}


@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 50%, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes  fadeRightTop{
    0%,100% {
        transform: translate3d(-10%,10%,0);
    }
    50% {
        transform: translate3d(0, 0, 0);
    }
}


@-webkit-keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes fadeInDown {
    0% {
        transform: translate3d(0, -100%, 0);
    }
    50% {
        opacity: 1;
        transform: translate3d(0, 0%, 0);
    }
    100% {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}
@keyframes fadeInLeft {
    0% {
        transform: translate3d(100%, 0, 0);
    }
    50% {
        transform: translate3d(0, 0%, 0);
    }
    100% {
        transform: translate3d(-100%, 0%, 0);
    }
}
@keyframes fadeInLeftTop {
    0% {
        transform: translate3d(100%,100%, 0);
    }
    50% {
        transform: translate3d(0, 0%, 0);
    }
    100% {
        transform: translate3d(-100%,-100%, 0);
    }
}



@keyframes fadeInUp3 {
    0% {
        opacity: 0;
        transform: translate3d(0, 20%, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}


/* svg 动画*/

.g-rect-fill{
    fill: none;
    stroke-width:5;
    stroke:#3CFFE9;
    stroke-linejoin:round;
    stroke-linecap:round;
    stroke-dasharray: 0, 1370;
    stroke-dashoffset: 0;

}


@keyframes lineMove {
    0%{
        stroke-dasharray: 0, 2000;
    }
    100%{
        stroke-dasharray: 2000, 2000;
    }
}

@keyframes rotateInUpLeft{0%{transform-origin:left bottom;transform:rotate(15deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}


@keyframes rotateInUpRight{0%{transform-origin:right bottom;transform:rotate(-15deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}