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"）。