How to do a CSS firework animation

 Yusuke Nakaya makes a firework animation by moving up together lots of small pieces and then sending them off in random directions.

Here is the CSS, which uses a pre-processor:

    @keyframes spark#{$i} {

      0% {

        transform: translateY(random(150) + 500px);

      }

      50% {

        transform: translateY(0);

      }

      100% {

        transform: rotateZ($deg) translateX(random(200) + 100px);

      }

    }

The animation is at: 'codepen.io/YusukeNakaya/pen/zYvWGwb'.

I have adapted this to use JavaScript to do the random bits rathen than a CSS pre-proessor.

There are more tips at: bbingo.xyz/techtips/