Bootstrap傳送帶動畫

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> 

什麼I M所要做的是使從1活動幻燈片規模至1.5在10秒的持續時間。的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"）。