Bootstrap carousel animation

Question

Я пытаюсь добавить некоторую простую анимацию в карусель бутстрапа. код, как ниже:

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div id="myCarousel" class="carousel slide" data-ride="carousel">     
       <!-- Wrapper for slides --> 
       <div class="carousel-inner" role="listbox"> 
        <div class="item active"><img src="img/form3-1.jpg" alt="Chania"></div> 
        <div class="item"><img src="img/form3-2.jpg" alt="Chania"></div> 
        <div class="item"><img src="img/form3-3.jpg" alt="Flower"></div> 
       </div> 

       <!-- Left and right controls --> 
       <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span> 
       </a> 
       <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span> 
       </a> 
      </div> 
     </div> 
    </div> 
</div> 

, что я пытаюсь сделать, это сделать активный масштаб слайдов от 1 до 1,5 в продолжительности 10s. css находится ниже:

#myCarousel .active > 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;} 

Я знаю, что HTML и CSS верны. Но когда страница загружается, первый слайд, который появляется, не масштабируется, но как только этот слайд изменяется, все работает отлично. И даже если я вернусь к первому слайду, он снова будет работать. Мне нужно на первом загружении, чтобы зафиксировать анимацию для первого слайда.

Answer 1

Вы можете использовать ключевые кадры - просто использовать анимацию, что вам нужно

#myCarousel .active > img { 
 
-webkit-animation: bummer 10s; 
 
    animation: bummer 10s; 
 
-webkit-transform: scale(0,0); 
 
transform: scale(0,0); 
 
} 
 

 
@-webkit-keyframes bummer { 
 
100% { 
 
    -webkit-transform: scale(1.5); 
 
} 
 
} 
 

 
@keyframes bummer { 
 
100% { 
 
    transform: scale(1.5); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
      <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false"> 
 
       <!-- Wrapper for slides --> 
 
       <div class="carousel-inner" role="listbox"> 
 
        <div class="item active"><img src="http://placehold.it/1920x1080" alt="Chania"></div> 
 
        <div class="item"><img src="http://placehold.it/1920x1080" alt="Chania"></div> 
 
        <div class="item"><img src="http://placehold.it/1920x1080" alt="Flower"></div> 
 
       </div> 
 

 
       <!-- Left and right controls --> 
 
       <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span> 
 
       </a> 
 
       <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
 
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span> 
 
       </a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

Ваш код работает корректно. window load время activeclass Состояние по умолчанию. В качестве состояния по умолчанию вы не увидите animation.

Я создал сниппет, и я установил data-interval="false" для остановки анимации карусели. После завершения загрузки, если вы используете left и right контроль карусели, вы увидите анимацию. Ваш первый clickleft или right будет первым слайдом.

Состояние по умолчанию - это не первый слайд.

#myCarousel .active > 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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
      <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false"> 
 
       <!-- Wrapper for slides --> 
 
       <div class="carousel-inner" role="listbox"> 
 
        <div class="item active"><img src="http://placehold.it/1920x1080" alt="Chania"></div> 
 
        <div class="item"><img src="http://placehold.it/1920x1080" alt="Chania"></div> 
 
        <div class="item"><img src="http://placehold.it/1920x1080" alt="Flower"></div> 
 
       </div> 
 

 
       <!-- Left and right controls --> 
 
       <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span> 
 
       </a> 
 
       <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
 
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span> 
 
       </a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Я надеюсь, что это поможет.

Примечание: data-interval="false" следует удалить с места производства, если вы хотите автопоиск. (Не устанавливайте data-interval="true" для автоматического воспроизведения).