How to zoom effect on a carousel in PrimeNG Angular

Question

I need to add zoom-in effect over carousel. Only active image should zoom in. I have added below code and it's working as expected but I found an issue with it.

CSS code

::ng-deep p-carousel .p-carousel-item-active {
    transition: all 1.5s ease 0s;
    -webkit-transform: scale(1.25);
    transform: scale(1.25);
    cursor: zoom-out;
}

HTML Code (angular template)

<p-carousel [value]="products" [numVisible]="1"  [circular]="true" [showIndicators]="false"  [autoplayInterval]="5000" [showNavigators]="false">
    <ng-template let-product pTemplate="item">
        <img src="assets/img/{{product.name}}" alt="{{product.name}}" width="100%" height="550px">
    </ng-template>
</p-carousel>

Issue: On page load, first active image doesn't get zoom effect.

Answer 1

By using animation and @keyframes I achieved zoom-in and zoom-out animation over an image.

::ng-deep p-carousel .p-carousel-item-active {
    animation: zoom-in-out 10s ease infinite;
}

@keyframes zoom-in-out {
    0% {
      transform: scale(1, 1);
      -webkit-transform: scale(1, 1);
    }
    50% {
      transform: scale(1.5, 1.5);
      -webkit-transform: scale(1.5, 1.5);
    }
    100% {
      transform: scale(1, 1);
      -webkit-transform: scale(1, 1);
    }
  }