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/