triggering animation only when slide slide's in - html

Question

hey guys i have a difficulty adding animations dynamically , I am basically just a HTML/CSS guy , who avoids JS but uses Jquery occasionally , I know how to write jquery code though . so baically my difficulty is that i have thos bootstrap carasoul fiddle here :
now i have created a CSS-3 animation for the images in the carasoul The animation code is below :
#keyframes scalebg {
0%{
-ms-transform:scale(1);
-o-transform:scale(1);
-moz-transform:scale(1);
-webkit-transform:scale(1);
transform:scale(1);
}
100% {
-ms-transform:scale(1.3);
-o-transform:scale(1.3);
-moz-transform:scale(1.3);
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
}
.scalebg {
-webkit-animation-duration: 5s;
-o-animation-duration: 5s;
animation-duration: 5s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-animation-name: scalebg;
-o-animation-name: scalebg;
animation-name: scalebg;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-o-animation-direction: alternate;
animation-direction: alternate;
}
The issue i am having ::
now what i would really like to do is when each slide appears i would immediately like the class scalebg to be appeared to the <img> tag in that particulate slide , the problem is how do i detect which perticular slide has slided in and how do i add the class scalebg only to that perticular slide ?? Thats the challenge that i am facing ..
the bootrap documentation does say that the bootstrap carasoul exposes 2 events :
slide.bs.carousel :: This event fires immediately when the slide
instance method is invoked.
slid.bs.carousel :: This event is fired when the carousel has
completed its slide transition.
but i am not sure how i can use these events to accomplish what i want . can somebody please guide me .
P.S. ::
as of now the effect works because i have added the following code to the animation :
animation-iteration-count: infinite;
but thats not how i would like the animation to be .
Thank you.
Alex-z.

Answer 1

You can use e.relatedTarget for the element to be active.
$('#myCarousel').on('slid.bs.carousel', function (e) {
$('.item').find('img').removeClass('scalebg');
$(e.relatedTarget).find('img').addClass('scalebg');
})
Fiddle Demo