@-webkit-keyframes bgchange1 {
    0% {
        width: 0;
        opacity: 0;
    }
    100% {
        width: 100%;
        opacity: 1;
    }
}

@keyframes bgchange1 {
    0% {
        width: 0;
        opacity: 0;
    }
    100% {
        width: 100%;
        opacity: 1;
    }
}

.bgchange1 {
    -webkit-animation-name: bgchange1;
    animation-name: bgchange1;
}

@-webkit-keyframes bgcchange {
    0% {
        width: 100%;
        opacity: 1;
    }
    100% {
        width: 0;
        opacity: 0;
    }
}

@keyframes bgcchange {
    0% {
        width: 100%;
        opacity: 1;
    }
    100% {
        width: 0;
        opacity: 0;
    }
}

.bgcchange {
    -webkit-animation-name: bgcchange;
    animation-name: bgcchange;
}

@-webkit-keyframes appbgchange {
    0% {
        left:0;
        bottom:0;
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    100% {
        width: 0;
        height: 530px;
        left:calc((100% - 1600px) / 2);
        bottom:0;
        opacity: 0;
    }
}

@keyframes appbgchange {
    0% {
        left:0;
        bottom:0;
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    100% {
        width: 0;
        height: 530px;
        left:calc((100% - 1600px) / 2);
        bottom:0;
        opacity: 0;
    }
}

.appbgchange {
    -webkit-animation-name: appbgchange;
    animation-name: appbgchange;
}
@-webkit-keyframes newsbgchange {
    0% {
        height: 100%;
    }
    100% {
        height: 50%;
    }
}

@keyframes newsbgchange {
    0% {
        height: 100%;
    }
    100% {
        height: 50%;
    }
}

.newsbgchange {
    -webkit-animation-name: newsbgchange;
    animation-name: newsbgchange;
}