.firework{position:absolute;opacity:0}.particle{position:absolute;width:4px;height:4px;border-radius:50%;transform-origin:50% 50%}@keyframes firework{0%{transform:scale(0);opacity:1}10%{opacity:1}to{transform:scale(1);opacity:0}}.firework .particle:first-child{animation:move 1s ease-out forwards;transform:rotate(0deg) translateX(40px) rotate(0deg)}.firework .particle:nth-child(2){animation:move 1s ease-out forwards;transform:rotate(30deg) translateX(40px) rotate(-30deg)}.firework .particle:nth-child(3){animation:move 1s ease-out forwards;transform:rotate(60deg) translateX(40px) rotate(-60deg)}.firework .particle:nth-child(4){animation:move 1s ease-out forwards;transform:rotate(90deg) translateX(40px) rotate(-90deg)}.firework .particle:nth-child(5){animation:move 1s ease-out forwards;transform:rotate(120deg) translateX(40px) rotate(-120deg)}.firework .particle:nth-child(6){animation:move 1s ease-out forwards;transform:rotate(150deg) translateX(40px) rotate(-150deg)}.firework .particle:nth-child(7){animation:move 1s ease-out forwards;transform:rotate(180deg) translateX(40px) rotate(-180deg)}.firework .particle:nth-child(8){animation:move 1s ease-out forwards;transform:rotate(210deg) translateX(40px) rotate(-210deg)}.firework .particle:nth-child(9){animation:move 1s ease-out forwards;transform:rotate(240deg) translateX(40px) rotate(-240deg)}.firework .particle:nth-child(10){animation:move 1s ease-out forwards;transform:rotate(270deg) translateX(40px) rotate(-270deg)}.firework .particle:nth-child(11){animation:move 1s ease-out forwards;transform:rotate(300deg) translateX(40px) rotate(-300deg)}.firework .particle:nth-child(12){animation:move 1s ease-out forwards;transform:rotate(330deg) translateX(40px) rotate(-330deg)}@keyframes move{0%{transform:translateX(0)}to{transform:translateX(80px);opacity:0}}