/* 大图 */
.phopo {
    position: absolute;
    height: 100%;
    box-sizing: content-box;
}

@keyframes testKey {
    0% {}

    100% {
        transform: translateX(-22%)
    }
}


.phopo {
    animation-name: testKey;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    /* animation-direction:alternate-reverse; */
    animation-timing-function: linear;
    animation-direction: alternate
}

/* 燕子 */
@keyframes testBird {
    0% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

.bird {
    display: block;
    position: absolute;
    /* top: 175px;
     left: 10px; */
    top: 75%;
    left: 1%;
    animation-name: testBird;
    animation-duration: 6s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
}
/*@keyframes testBird {*/
/*    0% {*/
/*        opacity: 1;*/
/*    }*/

/*    80% {*/
/*        opacity: 1;*/
/*    }*/

/*    100% {*/
/*        transform: translateY(100%);*/
/*        opacity: 0;*/
/*    }*/
/*}*/

.left {
    display: block;
    position: absolute;
    top: 97%;
    left: 19.8%;
    animation-name: left;
    animation-duration: 6s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
}
@keyframes left {
    0% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform:translateY(-70%);
        opacity: 0;
    }
}
.right {
    display: block;
    position: absolute;
    top: 96%;
    left: 20.2%;
    animation-name: right;
    animation-duration: 6s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
}
@keyframes right {
    0% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform:translateY(-65%);
        opacity: 0;
    }
}
.birdCrowd {
    display: block;
    position: absolute;
    top: 20%;
    left: 75%;
    /* animation-name: testBirdCrowd; */
    /* animation-duration: 15s;
     animation-fill-mode:forwards;
     animation-iteration-count:infinite; */
    animation: testBirdCrowd 10S infinite linear;

}
@keyframes testBirdCrowd {
    0% {
        opacity: 1;
        transform:translateX(30%); translateY(80%);
    }

    80% {
        opacity: 1;
    }

    100% {
        transform:translateX(-30%); translateY(100%);
        opacity: 0;
    }
}
/* 云 */
@keyframes testSay {
    0% {}

    100% {
        transform: translateX(-30%);
    }
}

.say {
    display: block;
    position: absolute;
    top: 1%;
    left: 10%;
    animation-name: testSay;
    animation-duration: 15s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate
}

/* 船 */
@keyframes testShip1 {
    0% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateX(-130%) translateY(100%);
        opacity: 0;
    }
}

.ship1 {
    display: block;
    position: absolute;
    top: 75%;
    left: 33%;
    animation-name: testShip1;
    animation-duration: 10s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

@keyframes testShip2 {
    0% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateX(140%) translateY(140%);
        opacity: 0;
    }
}

.ship2 {
    display: block;
    position: absolute;
    top: 70%;
    left: 45%;
    animation-name: testShip2;
    animation-duration: 9s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

@keyframes testShip3 {
    0% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateX(-140%);
        opacity: 0;
    }
}

.ship3 {
    display: block;
    position: absolute;
    top: 75%;
    left: 61%;
    animation-name: testShip3;
    animation-duration: 12s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

@keyframes testShip4 {
    0% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateX(140%) translateY(140%);
        opacity: 0;
    }
}

.ship4 {
    display: block;
    position: absolute;
    top: 70%;
    left: 73%;
    animation-name: testShip4;
    animation-duration: 15s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

/* 跳舞 */
@keyframes testDance {
    0% {
        transform: translateX(-30%) translateY(-30%);
        /*opacity: 0;*/
    }

    50% {
        transform: translateX(30%);
        /*opacity: 1;*/
    }

    100% {
        transform: translateX(30%) translateY(30%);
        /*opacity: 0.5;*/
    }
}

.dance {
    /* animation: testDance 0.5s infinite; */
    display: block;
    position: absolute;
    top: 80%;
    left: 80%;
    animation-name: testDance;
    animation-duration: 15s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;

}

/* 雪 */
@keyframes testSnow {
    0% {
        transform:  translateY(0%);
        opacity: 1;
    }


    100% {
        transform:  translateY(100%);
        opacity: 0;
    }
}

.snow {
    /* animation: testDance 0.5s infinite; */
    display: block;
    position: absolute;
    top: 0%;
    left: 75%;

    animation: testSnow 15.5S infinite linear;
}
/* @keyframes testContent1 {
    0% {
        opacity:0;
    }
    
    100% {
        transform: translateX(-29%);
        opacity:100;
    }
} */
/* .content{

} */
.content1 {
    display: none;
    /* display: block; */
    position: absolute;
    top: 73%;
    left: 4%;
    /* animation: testContent1 20s infinite linear 1s alternate; */
}

.content2 {
    display: none;
    position: absolute;
    top: 25%;
    left: 18%;
    /* animation: testContent1 20s infinite linear 1s alternate; */
}

.content3 {
    display: none;
    position: absolute;
    top: 16%;
    left: 42%;
}

.content4 {
    display: none;
    position: absolute;
    top: 65%;
    left: 49%;
}

.content5 {
    display: none;
    position: absolute;
    top: 75%;
    left: 58%;
}

.content6 {
    display: none;
    position: absolute;
    top: 67%;
    left: 72%;
}

.content7 {
    display: none;
    position: absolute;
    top: 31%;
    left: 88%;
}