#my-firework{position:absolute;top:-25%;left:0;width:100%;height:100%}.fireworks{height:100%;width:100%;display:flex;align-items:center;justify-content:center;scale:.25}.fireworks .firework{position:relative;top:0;left:0;margin:0 50px}.fireworks .firework:before{content:"";display:block;border-radius:5px;background-color:red;width:5px;height:0px;will-change:transform;transform:translateY(1000px);animation:fireworkstart 3s ease-out infinite}.fireworks .firework .explosion{position:absolute;top:0;width:5px;height:20px;opacity:0;transform-origin:top center;will-change:transform;animation:explosion .7s linear 3s infinite}.fireworks .firework .explosion:nth-child(1){transform:rotate(0)}.fireworks .firework .explosion:nth-child(2){transform:rotate(90deg)}.fireworks .firework .explosion:nth-child(3){transform:rotate(180deg)}.fireworks .firework .explosion:nth-child(4){transform:rotate(-90deg)}.fireworks .firework .explosion:nth-child(5){transform:rotate(45deg)}.fireworks .firework .explosion:nth-child(6){transform:rotate(-45deg)}.fireworks .firework .explosion:nth-child(7){transform:rotate(135deg)}.fireworks .firework .explosion:nth-child(8){transform:rotate(225deg)}.fireworks .firework .explosion .spark{position:absolute;top:0;width:100%;height:100%;border-radius:5px;will-change:transform;animation:explosion2 .7s ease-in-out 3s infinite}.fireworks .firework .explosion .spark.silver{background-color:#00f}.fireworks .firework .explosion .spark.gold{background-color:red}@keyframes fireworkstart{0%{height:0px;transform:translateY(1000px)}50%{height:50px}75%{height:30px}to{height:0;transform:translateY(0)}}@keyframes explosion{0%{height:0px;opacity:0}50%{height:25px;opacity:1}to{height:0px;opacity:0}}@keyframes explosion2{0%{transform:translateY(0)}50%{transform:translateY(5px)}75%{transform:translateY(50px)}to{transform:translateY(70px)}}