我很难动态添加动画，我基本上只是一个HTML/CSS开发人员，避免使用JS，但偶尔使用jQuery。我知道如何写jQuery代码。我的问题是我有一个Bootstrap carousel Fiddle。
现在我已经为carousel中的图像创建了一个CSS-3动画。动画代码如下：

@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;
}

问题

现在我真正想做的是，当每张幻灯片出现时，我希望scalebg类立即出现在该特定幻灯片中的<img>标记中。我如何检测哪一张幻灯片已经滑进来了，以及我如何将类scalebg仅添加到该特定幻灯片？
Bootstrap文档确实说Bootstrap carousel公开了2个事件：
slide.bs.carousel：：当调用幻灯片示例方法时，将立即激发此事件。
slide.bs.carousel：：当传送带完成其幻灯片切换时，将激发此事件。
但我不确定我如何利用这些事件来完成我想要的。

发布脚本

到目前为止，效果可以正常工作，因为我已经将以下代码添加到动画中：

animation-iteration-count: infinite;

但这不是我想要的动画。