.bg-stars {
    position: fixed;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.bg-stars:before, .bg-stars:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: black url("../images/stars.webp") repeat;
    -webkit-animation: slidein 400s linear infinite;
            animation: slidein 400s linear infinite;
    z-index: -1;
}

.bg-stars:before {
    right: 100%;
}

.overlay {
    position: fixed;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.overlay:before, .overlay:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: transparent url("../images/twinkling.webp") repeat;
    animation: slidein 300s linear infinite reverse;
    z-index: 0;
}

.overlay:before {
    right: 100%;
}

@-webkit-keyframes slidein {
    from {
        transform: translateX(0%);
    }
  
    to {
        transform: translateX(100%);
    }
}

@keyframes slidein {
    from {
        transform: translateX(0%);
    }
  
    to {
        transform: translateX(100%);
    }
}