我已经在自举旋转木马上挣扎了几天，它应该像默认旋转木马一样向左/向右滑动，但是增加了褪色（新物品在进入时慢慢变得不透明，而前一个物品在搬出时慢慢失去不透明度），我尝试了很多变化，但其中一些在Firefox中不起作用，其他一些在歌剧等方面都失败了。
这是HTML：
<section>
<div class="container">
<h2>Some title</h2>
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
<p>Some text</p>
<div class="ingo col-sm-8 col-sm-offset-2">
<div id="pubCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="foto" src="{{'assets/img/some-image.jpg'|theme }}"/>
<h3 class="name longn">Carousel text</h3>
</div>
<div class="item">
<img class="foto" src="{{'assets/img/some-image.jpg'|theme }}"/>
<h3 class="name">Carousel text</h3>
</div>
</div>
<div class="pub-counter">
<p class="counter-line"></p>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#pubCarousel" role="button" data-slide="prev">
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#pubCarousel" role="button" data-slide="next">
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
这是我的旋转木马设置，它不起作用（我知道它现在很糟糕，我尝试了10个解决方案，但它无论如何都不起作用），其余的轮播是默认的：
.ingo .carousel-inner>.item {
-webkit-transition: -webkit-transform 1s ease-in-out, opacity 2s ease-in-out;
-moz-transition: -moz-transform 1s ease-in-out, opacity .5s ease-in-out;
-o-transition: -o-transform 1s ease-in-out, opacity 2s ease-in-out;
transition: transform 1s ease-in-out, opacity 2s ease-in-out;
}
.ingo .carousel-inner>.item.active,.ingo .carousel-inner>.item.active {
-webkit-transition: -webkit-transform 1s ease-in-out, opacity .5s ease-in-out;
-moz-transition: -moz-transform 1s ease-in-out, opacity .5s ease-in-out;
-o-transition: -o-transform 1s ease-in-out, opacity .5s ease-in-out;
transition: transform 1s ease-in-out, opacity 2s ease-in-out;
}
.ingo .carousel .item {
opacity:0;
}
.ingo .carousel .carousel-inner .active {
opacity: 1;
}
.ingo .carousel .carousel-inner .next,
.ingo .carousel .carousel-inner .prev
.ingo .carousel .carousel-inner .active.left,
.ingo .carousel .carousel-inner .active.right {
left: 0;
opacity: 0;
}
.ingo .carousel .carousel-inner .next.left,
.ingo .carousel .carousel-inner .prev.right {
opacity: 1;
}
我没有使用任何JS修改。我希望这个答案不会复制一些已发布的问题，我无法找到解决方案。
感谢所有帮助人员，非常感谢。
答案 0 :(得分：1)
本站点的教程可以帮助您：http://www.sitepoint.com/bootstrap-carousel-with-css3-animations/
Animate.css是一个非常好的CSS3库，我在很多项目中都使用它来“加强思考”。
答案 1 :(得分：1)
经过大量的努力，我终于设法获得了幻灯片+淡入淡出效果，我也找到了这个Stackoverflow主题Can the Twitter Bootstrap Carousel plugin fade in and out on slide transition，但任何发布的解决方案都不适用于每个浏览器 - 尤其是Firefox做了很多麻烦。所以有一个解决方案。希望这有助于某人。
.ingo .carousel .carousel-inner .item {
-webkit-transition: all 1.1s ease-in-out, opacity 1s ease-in;
-moz-transition: all 1.1s ease-in-out, opacity 1s ease-in;
-ms-transition: all 1.1s ease-in-out, opacity 1s ease-in;
-o-transition: all 1.1s ease-in-out, opacity 1s ease-in;
transition: all 1.1s ease-in-out, opacity 1s ease-in;
}
.ingo .carousel .carousel-inner .item,
.ingo .carousel .carousel-inner .active.left,
.ingo .carousel .carousel-inner .active.right {
opacity: 0 !important;
}
.ingo .carousel .carousel-inner .active,
.ingo .carousel .carousel-inner .next.left,
.ingo .carousel .carousel-inner .prev.right {
opacity: 1 !important;
}
.#pubCarousel.carousel .carousel-control {
z-index: 2 !important;
}
答案 2 :(得分：0)
试试这个并查看示例代码HERE
.carousel-caption{
padding-bottom:100px;
}
.rw-words-1 span{
position: absolute;
opacity: 0;
overflow: hidden;
color: #f65a3a;
font-weight:400 !important;
-webkit-animation: rotateWord 18s linear infinite 0s;
-ms-animation: rotateWord 18s linear infinite 0s;
animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
color: #0d9b56;
}
.rw-words-1 span:nth-child(3) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
color: #f65a3a;
}
.rw-words-1 span:nth-child(4) {
-webkit-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
color:#0d9b56;
}
@-webkit-keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -webkit-transform: translateY(-30px); }
5% { opacity: 1; -webkit-transform: translateY(0px);}
17% { opacity: 1; -webkit-transform: translateY(0px); }
20% { opacity: 0; -webkit-transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -ms-transform: translateY(-30px); }
5% { opacity: 1; -ms-transform: translateY(0px);}
17% { opacity: 1; -ms-transform: translateY(0px); }
20% { opacity: 0; -ms-transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); }
5% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);}
17% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); }
20% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
.rw-words{
display: inline;
text-indent: 10px;
}
.agileits-banner-info span {
color: #fff;
font-size: 28px;
letter-spacing: 3px;
font-weight: 700;
text-align: left !important;
}
.agileits_w3layouts_more a {
font-size: 1.1em;
color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
background:#0d9b56;
padding: .7em 2em;
display: inline-block;
margin-top: 40px;
border-radius:2px;
}
.agileits_w3layouts_more a:focus{
outline:none;
}
.agileits_w3layouts_more a:hover{
background:#f65a3a;
}
.agileits_w3layouts_more.menu__item {
text-align: center;
}
.carousel-fade .carousel-inner .item {
opacity: 0;
transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-control {
z-index: 2;
}
/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-fade .carousel-inner > .item.next,
.carousel-fade .carousel-inner > .item.active.right {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.prev,
.carousel-fade .carousel-inner > .item.active.left {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.next.left,
.carousel-fade .carousel-inner > .item.prev.right,
.carousel-fade .carousel-inner > .item.active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="4500">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://www.script-tutorials.com/demos/284/images/pic1.jpg" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<div class="agileits-banner-info bannertext-desktop">
<span>A Powerful But Simple Way to Manage Your </span>
<div class="rw-words rw-words-1">
<span>Company</span>
<span> People</span>
<span>Happiness</span>
<span>Wonder</span>
</div>
<div class="agileits_w3layouts_more menu__item">
<a href="#" class="menu__link" data-toggle="modal" data-target="#myModal">Learn More</a>
</div>
</div>
</div>
</div>
<div class="item">
<img src="http://www.script-tutorials.com/demos/284/images/pic2.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<div class="agileits-banner-info bannertext-desktop">
<span>A Powerful But Simple Way to Manage Your </span>
<div class="rw-words rw-words-1">
<span>Company</span>
<span> People</span>
<span>Happiness</span>
<span>Wonder</span>
</div>
<div class="agileits_w3layouts_more menu__item">
<a href="#" class="menu__link" data-toggle="modal" data-target="#myModal">Learn More</a>
</div>
</div>
</div>
</div>
<div class="item">
<img src="http://www.script-tutorials.com/demos/284/images/pic3.jpg" alt="New York" style="width:100%;">
<div class="carousel-caption">
<div class="agileits-banner-info bannertext-desktop">
<span>A Powerful But Simple Way to Manage Your </span>
<div class="rw-words rw-words-1">
<span>Company</span>
<span> People</span>
<span>Happiness</span>
<span>Wonder</span>
</div>
<div class="agileits_w3layouts_more menu__item">
<a href="#" class="menu__link" data-toggle="modal" data-target="#myModal">Learn More</a>
</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>