Specifying Specific CSS Animations for Slides


#1

I’m currently trying to create animations on ionic slides using a different svg for each image which has other images overlayed (which all have an id) and css keyframe animations. However, all of the images on every slide are playing at once instead of once I get to the slide, so I was wondering if I could get some help with how to play specific animations for specific slides using these css animations.
So in the css file I would have something like this for every image

#img1{
    animation: scale linear 3s;
}
@keyframes scale{
  0% {
    transform: scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    transform: scaleX(1.20) scaleY(1.20) ;
  }

and in my html file I have

<ion-slides (ionSlideDidChange)="slideChanged()">
  <ion-slide *ngFor="let pic of pictures">
  <svg ...>
    <g id=... attr.xlink:href=.../></g>
      <g *ngFor=overlay of pic>
      <image .../>
   </g>
 </svg>

Is there any way I can use the slideChanged function to link certain animations to certain slides?


#2

See: