<div class="fireworks" style="left: 15%; top: 5%;"></div>
<div class="fireworks" style="right: 30%; top: 13%; animation-delay: -0.4s;"></div>
<div class="fireworks" style="left: 5%; top: 23%; animation-delay: -1.7s;"></div>
<div class="fireworks" style="right: 45%; top: 8%; animation-delay: -3.1s;"></div>

body{
  background: #000;
  overflow: hidden;
}
.fireworks {
    position: absolute;
    width: 150px;
    height: 150px;
    background-image: url(https://imgservices-1252317822.image.myqcloud.com/image/081320210201435/e9951400.png);
    background-origin: right top;
    background-repeat: no-repeat;
    background-size: auto 150px;
    animation: fireworks 1s steps(24) infinite, random 4s steps(1) infinite;
}
@keyframes fireworks {
    to {
        background-position: 100%;
    }
}

@keyframes random {
    25% {
        transform: translate(200%, 50%) scale(0.8);
    }
    50% {
        transform: translate(80%, 80%) scale(1.2);
    }
    75% {
        transform: translate(20%, 60%) scale(0.65);
    }
}