title: Bootstrap carousel animation
body: <p>I'm trying to add some simple animation to a bootstrap carousel.
  the code is like the below:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;                
                  &lt;!-- Wrapper for slides --&gt;
                  &lt;div class="carousel-inner" role="listbox"&gt;
                      &lt;div class="item active"&gt;&lt;img src="img/form3-1.jpg" alt="Chania"&gt;&lt;/div&gt;
                      &lt;div class="item"&gt;&lt;img src="img/form3-2.jpg" alt="Chania"&gt;&lt;/div&gt;
                      &lt;div class="item"&gt;&lt;img src="img/form3-3.jpg" alt="Flower"&gt;&lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;!-- Left and right controls --&gt;
                  &lt;a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"&gt;
                      &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;&lt;span class="sr-only"&gt;Previous&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"&gt;
                      &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;&lt;span class="sr-only"&gt;Next&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>what i m trying to do is to make the active slide scale from 1 to 1.5 in a duration of 10s. the css is below:</p>
  
  <pre><code>#myCarousel .active &gt; img{transform:scale(1.5); -webkit-transform: scale(1.5); -webkit-transition: -webkit-transform 10s ease-out;-moz-transition: -moz-transform 10s ease-out;transition: transform 10s ease-out;}
  </code></pre>
  
  <p>I'm know that the HTML and CSS are correct.
  But when the page loads, the first slide that appears doesn't scale, but once that slide is changed the rest works perfectly. And even if i go back again to the first slide, it will work again. What I need is on the first load, to fix the animation for the first slide.</p>