Html CSS положить анимированные изображения фейерверков не работает

Question

Я поместил html css изображение фейерверка на анимированный эффект увеличения изображения (как фейерверк), но он не работает, любое решение для этого

Спасибо

.slide2 {
  position: absolute;
  top: 52%;
  right: 25%;
  z-index: 2;
  animation: zoomIn 3000ms infinite ease;
  -webkit-animation: zoomIn 3000ms infinite ease;
}

@-webkit-keyframes zoomIn {
    0% {transform: scale(1);}
    50% {transform: scale(1.5);}
    100% {transform: scale(1);}
}

<span class="slide2" style="transform: matrix3d(0.7167, 0, 0, 0, 0, 0.7167, 0, 0, 0, 0, 0.7167, 0, -14.9212, 4.5442, 0, 1);"><img src="http://brotherslab.thesoftking.com/html/lotten/demo/assets/images/shape/star.png" alt="banner-shape"></span>