/* 动画代码

@keyframes example {
    from {
        background-color: red;
    }
    to {
        background-color: yellow;
    }
}


div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;控制动画循环播放3次 
} */

.left, .right, .logoslogan, .hotline, .ani-ul, .our, .QR, .ani-bottombox, .ani-btn {
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-fill-mode: none;
}

.logoslogan, .our {
    animation-name: logoslogan;
}

@keyframes logoslogan {
    0% {
        -webkit-transform: translateX(-250px);
        transform: translateX(-250px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

.hotline, .QR {
    animation-name: hotline;
}

@keyframes hotline {
    0% {
        -webkit-transform: translateX(250px);
        transform: translateX(250px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

.p1 .banner .left {
    animation-name: p1left;
}

@keyframes p1left {
    0% {
        -webkit-transform: translateX(-300px);
        transform: translateX(-300px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

.p1 .banner .right {
    animation-name: p1right;
}

@keyframes p1right {
    0% {
        -webkit-transform: translateX(350px);
        transform: translateX(350px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

.ani-btn, .ani-ul, .ani-bottombox {
    animation-name: ani-ul;
}

@keyframes ani-ul {
    0% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateX(0);
        opacity: 1;
    }
}

.ani-title, .bluebox, .ani-ul {
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: none;
}

.ani-title {
    animation-name: ani-title;
}

.bluebox {
    animation-name: bluebox;
}

@keyframes ani-title {
    0% {
        -webkit-transform: scale(.2);
        transform: scale(.2);
        opacity: 0;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bluebox {
    0% {
        -webkit-transform: scale(.5);
        transform: scale(.5);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}