title: Need to add a class name dynamically
body: <p>Currently i am using swipper carousel in the website that i m creating.I would like to add some animation to the caption of each sliding image.So i m using @-webkit-keyframes for it.But only for the first image i m getting this effect.In other Images the content is static.Any idea how to implement this for every slide after it loads.Appreciate any help.Thanks...</p>
  
  <pre><code>     .carousel-content{
              width: 1200px;
              height: 100px;
           //padding: 20px;
             padding-top:200px;
             padding-left:80px;
             padding-right: 80px;
             position: absolute;
             text-align: center;
             color:white;
             font-size:40px;
             font-weight: 800;
             -webkit-animation-duration: 10s;
             animation-duration: 2s;
            -webkit-animation-fill-mode: both;
             animation-fill-mode: both;
       }
     @-webkit-keyframes fadeInDown {
              0% {
                 opacity: 0;
                 -webkit-transform: translateY(-20px);
              }
              100% {
                 opacity: 1;
                 -webkit-transform: translateY(0);
              }
           }
  
           @keyframes fadeInDown {
              0% {
                 opacity: 0;
                 transform: translateY(-20px);
              }
              100% {
                 opacity: 1;
                 transform: translateY(0);
              }
           }
  
        .fadeInDown {
               -webkit-animation-name: fadeInDown ;
                animation-name: fadeInDown ;
          }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="swiper-container" &gt;
      &lt;div class="swiper-wrapper" &gt;
          &lt;div class="swiper-slide"&gt;
          &lt;div class="carousel-content fadeInDown "&gt;
             Buisness is good 
          &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div class="swiper-slide"&gt;
          &lt;div class="carousel-content fadeInDown "&gt;
              Buisness is good 
          &lt;/div&gt;&lt;/div&gt;
          &lt;div class="swiper-slide"&gt;
             &lt;div class="carousel-content fadeInDown"&gt;
             Buisness is good 
          &lt;/div&gt;&lt;/div&gt;
          &lt;div class="swiper-slide"&gt;
            &lt;div class="carousel-content fadeInDown"&gt;
             Buisness is good 
          &lt;/div&gt;&lt;/div&gt;
          &lt;div class="swiper-slide" &gt;
             &lt;div class="carousel-content fadeInDown"&gt;
              Buisness is good 
          &lt;/div&gt;&lt;/div&gt;
          &lt;div class="swiper-slide"&gt;
             &lt;div class="carousel-content fadeInDown"&gt;
              Buisness is good 
          &lt;/div&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
      &lt;div class="swiper-button-next"&gt;&lt;/div&gt;
      &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My jsfiddle is <a href="https://jsfiddle.net/2ume828d/" rel="nofollow noreferrer">https://jsfiddle.net/2ume828d/</a></p>