html, body {
    height: 100%;
    background: #000000;
    overflow: hidden;
}

.ag-sparks {
    height: 100%;

    position: relative;
}

.ag-sparks:before,
.ag-sparks:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.ag-sparks:before {
    content: "";

    -webkit-animation: an-blink 30s linear 3s infinite;
    -moz-animation: an-blink 30s linear 3s infinite;
    -o-animation: an-blink 30s linear 3s infinite;
    animation: an-blink 30s linear 3s infinite;
}

.ag-spark {
    height: 100%;

    position: relative;
}

.ag-spark:before,
.ag-spark:after {
    content: "";
    background-image: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sparks/images/spark.png);
    background-position-x: 50%;
    background-repeat: repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    opacity: 0;

    will-change: transform;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.ag-spark:before {
    -webkit-animation: an-spark 1800s linear infinite, an-slow-shake 26s linear 13s infinite;
    -moz-animation: an-spark 1800s linear infinite, an-slow-shake 26s linear 13s infinite;
    -o-animation: an-spark 1800s linear infinite, an-slow-shake 26s linear 13s infinite;
    animation: an-spark 1800s linear infinite, an-slow-shake 26s linear 13s infinite;
}

.ag-spark:after {
    -webkit-animation: an-spark 3600s linear infinite, an-slow-shake-revert 26s linear infinite;
    -moz-animation: an-spark 3600s linear infinite, an-slow-shake-revert 26s linear infinite;
    -o-animation: an-spark 3600s linear infinite, an-slow-shake-revert 26s linear infinite;
    animation: an-spark 3600s linear infinite, an-slow-shake-revert 26s linear infinite;
}

@-webkit-keyframes an-spark {
    0% {
        background-position-y: 0;

        opacity: 0;
    }
    1%,
    99% {
        opacity: 1;
    }
    100% {
        background-position-y: -3750em;

        opacity: 0;
    }
}

@-moz-keyframes an-spark {
    0% {
        background-position-y: 0;

        opacity: 0;
    }
    1%,
    99% {
        opacity: 1;
    }
    100% {
        background-position-y: -3750em;

        opacity: 0;
    }
}

@-o-keyframes an-spark {
    0% {
        background-position-y: 0;

        opacity: 0;
    }
    1%,
    99% {
        opacity: 1;
    }
    100% {
        background-position-y: -3750em;

        opacity: 0;
    }
}

@keyframes an-spark {
    0% {
        background-position-y: 0;

        opacity: 0;
    }
    1%,
    99% {
        opacity: 1;
    }
    100% {
        background-position-y: -3750em;

        opacity: 0;
    }
}

@-webkit-keyframes an-slow-shake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    25% {
        -webkit-transform: translateX(1.25em);
        transform: translateX(1.25em);
    }
    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    75% {
        -webkit-transform: translateX(-1.25em);
        transform: translateX(-1.25em);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-moz-keyframes an-slow-shake {
    0% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        transform: translateX(0);
    }
    25% {
        -webkit-transform: translateX(1.25em);
        -moz-transform: translateX(1.25em);
        transform: translateX(1.25em);
    }
    50% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        transform: translateX(0);
    }
    75% {
        -webkit-transform: translateX(-1.25em);
        -moz-transform: translateX(-1.25em);
        transform: translateX(-1.25em);
    }
    100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        transform: translateX(0);
    }
}

@-o-keyframes an-slow-shake {
    0% {
        -webkit-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
    25% {
        -webkit-transform: translateX(1.25em);
        -o-transform: translateX(1.25em);
        transform: translateX(1.25em);
    }
    50% {
        -webkit-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
    75% {
        -webkit-transform: translateX(-1.25em);
        -o-transform: translateX(-1.25em);
        transform: translateX(-1.25em);
    }
    100% {
        -webkit-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes an-slow-shake {
    0% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
    25% {
        -webkit-transform: translateX(1.25em);
        -moz-transform: translateX(1.25em);
        -o-transform: translateX(1.25em);
        transform: translateX(1.25em);
    }
    50% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
    75% {
        -webkit-transform: translateX(-1.25em);
        -moz-transform: translateX(-1.25em);
        -o-transform: translateX(-1.25em);
        transform: translateX(-1.25em);
    }
    100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes an-slow-shake-revert {
    0% {
        -webkit-transform: scale(-1, 1) translateX(0);
        transform: scale(-1, 1) translateX(0);
    }
    25% {
        -webkit-transform: scale(-1, 1) translateX(1.25em);
        transform: scale(-1, 1) translateX(1.25em);
    }
    50% {
        -webkit-transform: scale(-1, 1) translateX(0);
        transform: scale(-1, 1) translateX(0);
    }
    75% {
        -webkit-transform: scale(-1, 1) translateX(-1.25em);
        transform: scale(-1, 1) translateX(-1.25em);
    }
    100% {
        -webkit-transform: scale(-1, 1) translateX(0);
        transform: scale(-1, 1) translateX(0);
    }
}

@-moz-keyframes an-slow-shake-revert {
    0% {
        -webkit-transform: scale(-1, 1) translateX(0);
        -moz-transform: scale(-1, 1) translateX(0);
        transform: scale(-1, 1) translateX(0);
    }
    25% {
        -webkit-transform: scale(-1, 1) translateX(1.25em);
        -moz-transform: scale(-1, 1) translateX(1.25em);
        transform: scale(-1, 1) translateX(1.25em);
    }
    50% {
        -webkit-transform: scale(-1, 1) translateX(0);
        -moz-transform: scale(-1, 1) translateX(0);
        transform: scale(-1, 1) translateX(0);
    }
    75% {
        -webkit-transform: scale(-1, 1) translateX(-1.25em);
        -moz-transform: scale(-1, 1) translateX(-1.25em);
        transform: scale(-1, 1) translateX(-1.25em);
    }
    100% {
        -webkit-transform: scale(-1, 1) translateX(0);
        -moz-transform: scale(-1, 1) translateX(0);
        transform: scale(-1, 1) translateX(0);
    }
}

@-o-keyframes an-slow-shake-revert {
    0% {
        -webkit-transform: scale(-1, 1) translateX(0);
        -o-transform: scale(-1, 1) translateX(0);
        transform: scale(-1, 1) translateX(0);
    }
    25% {
        -webkit-transform: scale(-1, 1) translateX(1.25em);
        -o-transform: scale(-1, 1) translateX(1.25em);
        transform: scale(-1, 1) translateX(1.25em);
    }
    50% {
        -webkit-transform: scale(-1, 1) translateX(0);
        -o-transform: scale(-1, 1) translateX(0);
        transform: scale(-1, 1) translateX(0);
    }
    75% {
        -webkit-transform: scale(-1, 1) translateX(-1.25em);
        -o-transform: scale(-1, 1) translateX(-1.25em);
        transform: scale(-1, 1) translateX(-1.25em);
    }
    100% {
        -webkit-transform: scale(-1, 1) translateX(0);
        -o-transform: scale(-1, 1) translateX(0);
        transform: scale(-1, 1) translateX(0);
    }
}

@keyframes an-slow-shake-revert {
    0% {
        -webkit-transform: scale(-1, 1) translateX(0);
        -moz-transform: scale(-1, 1) translateX(0);
        -o-transform: scale(-1, 1) translateX(0);
        transform: scale(-1, 1) translateX(0);
    }
    25% {
        -webkit-transform: scale(-1, 1) translateX(1.25em);
        -moz-transform: scale(-1, 1) translateX(1.25em);
        -o-transform: scale(-1, 1) translateX(1.25em);
        transform: scale(-1, 1) translateX(1.25em);
    }
    50% {
        -webkit-transform: scale(-1, 1) translateX(0);
        -moz-transform: scale(-1, 1) translateX(0);
        -o-transform: scale(-1, 1) translateX(0);
        transform: scale(-1, 1) translateX(0);
    }
    75% {
        -webkit-transform: scale(-1, 1) translateX(-1.25em);
        -moz-transform: scale(-1, 1) translateX(-1.25em);
        -o-transform: scale(-1, 1) translateX(-1.25em);
        transform: scale(-1, 1) translateX(-1.25em);
    }
    100% {
        -webkit-transform: scale(-1, 1) translateX(0);
        -moz-transform: scale(-1, 1) translateX(0);
        -o-transform: scale(-1, 1) translateX(0);
        transform: scale(-1, 1) translateX(0);
    }
}