css3实现流星划过动画效果

html结构：

Css3：

.d-shootingStar{
        .pos(a);
        .whlt(94.1333vw,51.2vw,20vw,9vw);
        .transform(rotate(-12deg));
        .d-stars{
            opacity: 0;
           .pos(a);
            left: 50%;
            top: 50%;
            .wh(11vw,9vw);
            -webkit-animation: tail 2s ease-in-out infinite, shooting 2s ease-in-out infinite;
            animation: tail 2s ease-in-out infinite,shooting 2s ease-in-out infinite;
            background: url(anverSaryFLiuXings.png) no-repeat;
            background-size: 100% 100%;
            &:nth-child(1){
                top:-7%;
                left:5%;
                .wh(10vw,9vw);
                -webkit-animation-delay: 500ms;
                        animation-delay: 500ms;
            }
            &:nth-child(2){
                .wh(11vw,9vw);
                top: 44%;
                left: 6%;
                .wh(11vw,9vw);
                 -webkit-animation-delay: 0ms;
                        animation-delay: 0ms;
            }
            &:nth-child(3){
                .wh(11vw,9vw);
                top: 5%;
                left: 80%;
                -webkit-transform: scale(0.8);
                        transform: scale(0.8);
                -webkit-animation-delay: 870ms;
                        animation-delay: 870ms;
            }
            &:nth-child(4){
                .wh(11vw,9vw);
                top: 35%;
            left: 90%;
            -webkit-transform: scale(0.6);
                    transform: scale(0.6);
            -webkit-animation-delay: 300ms;
                    animation-delay: 300ms;
            }
        }
    }