title: Transform animation not working for first slide in bootstrap carousel
body: <p>I have a bootstrap 4.0 carousel and I want zooming effect when each slides active. I have used <code>transform: scale</code> property for achieving it. I have applied <code>transform: scale</code> to <code>.carousel-item.active img</code> element. And I have added active class for first element using jquery. The animation is not working for my first slide. When it loops it works. I have tried to add the class in setTimeOut function, but it didn't help. Can any one please help me?</p>
  
  <p>These are my codes</p>
  
  <p>html</p>
  
  <pre><code>    &lt;div id="carouselExampleControls" class="carousel slide" data-ride="carousel"&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="carousel-item"&gt;
        &lt;img class="d-block w-100" src="https://placeimg.com/640/480/any" alt="First slide"&gt;
      &lt;/div&gt;
      &lt;div class="carousel-item"&gt;
        &lt;img class="d-block w-100" src="https://placeimg.com/640/480/nature" alt="Second slide"&gt;
      &lt;/div&gt;
      &lt;div class="carousel-item"&gt;
        &lt;img class="d-block w-100" src="https://placeimg.com/640/480/animals" alt="Third slide"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"&gt;
      &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"&gt;
      &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Next&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.carousel-item img{
    transition: all 1s;
    transform:scale(1);
  }
  
  .carousel-item.active img{
    transform:scale(1.2);
  }
  </code></pre>
  
  <p>jquery </p>
  
  <pre><code>window.setTimeout(function(){
                  $('#carouselExampleControls .carousel-item:first-child').addClass('active');
              },2000);
  </code></pre>
  
  <p><a href="http://jsfiddle.net/v3ou9gef/3/" rel="nofollow noreferrer">Here is the fiddle for the same</a></p>