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/
Comments
Post a Comment