有人能给我一个关于如何使用css3动画的示例，这是一个典型的bootstrap轮播中的元素吗？
我想要这个效果（bsstc.com.au）。我知道它是一种不同类型的滑块，但它内部的动画就是我所追求的。
我知道有一类（.active）添加到滑块中当前的项目但是当我做这样的事情时：
.slide-one .item-one {
-webkit-transition: all .6s ease-in 0s;
-moz-transition: all .6s ease-in 0s;
-ms-transition: all .6s ease-in 0s;
-o-transition: all .6s ease-in 0s;
transition: all .6s ease-in 0s;
margin:100px 0 0 0;
}
.slide-one.active .item-one {margin:0;}
它适用于Chrome，没有别的。我错过了更好的方式或不同的方式吗？
这是html ...
<div id="carousel-1" class="carousel slide carousel-fade hidden-phone">
<ol class="carousel-indicators">
<li data-target="#carousel-1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
<li data-target="#carousel-1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item slide-one active">
<div class="container">
<img class="item-one" src="/image/guitar.png" alt="" />
<img class="item-two" src="/image/featured-one.jpg" alt="" />
<a href="#">b</a>
</div>
</div>
<div class="item slide-two"><a href="#">a</a></div>
<div class="item slide-three">c</div>
</div>
<a class="carousel-control left" href="#carousel-1" data-slide="prev">‹</a>
<a class="carousel-control right" href="#carousel-1" data-slide="next">›</a>
</div><!-- carousel -->
<script>
$('#carousel-1').carousel({
interval:6000
});
</script>
答案 0 :(得分：1)
这太旧了，但如果还有人在这里寻找答案，那就是：
<div class="container main-container">
<h1>Bootstrap Carousel with Animate.css</h1>
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- First slide -->
<div class="item active deepskyblue">
<div class="carousel-caption">
<h3 data-animation="animated bounceInLeft" data-delay="1000" data-dur="1000">
This is the caption for slide 1
</h3>
<h3 data-animation="animated bounceInRight" data-delay="2000" data-dur="1000">
This is the caption for slide 1
</h3>
<button class="btn btn-primary btn-lg" data-animation="animated zoomInUp" data-delay="3000" data-dur="1000">Button</button>
</div>
</div> <!-- /.item -->
<!-- Second slide -->
<div class="item skyblue">
<div class="carousel-caption">
<h3 class="icon-container" data-animation="animated bounceInDown" data-delay="1000" data-dur="1000">
<span class="glyphicon glyphicon-heart"></span>
</h3>
<h3 data-animation="animated bounceInUp" data-delay="2000" data-dur="1000">
This is the caption for slide 2
</h3>
<button class="btn btn-primary btn-lg" data-animation="animated zoomInRight" data-delay="3000" data-dur="1000">Button</button>
</div>
</div><!-- /.item -->
<!-- Third slide -->
<div class="item darkerskyblue">
<div class="carousel-caption">
<h3 class="icon-container" data-animation="animated zoomInLeft" data-delay="1000" data-dur="1000">
<span class="glyphicon glyphicon-glass"></span>
</h3>
<h3 data-animation="animated flipInX" data-delay="2000" data-dur="1000">
This is the caption for slide 3
</h3>
<button class="btn btn-primary btn-lg" data-animation="animated lightSpeedIn" data-delay="3000" data-dur="1000">Button</button>
</div>
</div><!-- /.item -->
</div><!-- /.carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
</div><!-- /.container -->
.main-container {
padding: 10px 15px;
}
.skyblue {
background-color: #22c8ff;
}
.deepskyblue {
background-color: #00bfff;
}
.darkerskyblue {
background-color: #00a6dd;
}
.carousel-indicators {
bottom: 0;
}
.carousel-control.right,
.carousel-control.left {
background-image: none;
}
.carousel .item {
min-height: 350px;
height: 100%;
width:100%;
}
.carousel-caption h3,
.carousel .icon-container,
.carousel-caption button {
background-color: #09c;
}
.carousel-caption h3 {
padding: .5em;
}
.carousel .icon-container {
display: inline-block;
font-size: 25px;
line-height: 25px;
padding: 1em;
text-align: center;
border-radius: 50%;
}
.carousel-caption button {
border-color: #00bfff;
margin-top: 1em;
}
h1 {
text-align: center;
margin-bottom: 30px;
font-size: 30px;
font-weight: bold;
}
.p {
padding-top: 125px;
text-align: center;
}
.p a {
text-decoration: underline;
}
(function( $ ) {
//Function to animate slider captions
function doAnimations( elems ) {
//Cache the animationend event in a variable
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function () {
var $this = $(this),
$animationType = $this.data('animation');
// requires you add [data-delay] & [data-dur] in markup. values are in ms
$animDur = parseInt($this.data('dur'));
$animDelay = parseInt($this.data('delay'));
$this.css({"animation-duration": $animDur + "ms", "animation-delay": $animDelay + "ms", "animation-fill-mode": "both"}).addClass($animationType).one(animEndEv, function () {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $('#carousel-example-generic'),
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
//Initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
//Pause carousel
$myCarousel.carousel('pause');
//Other slides to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function (e) {
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
})(jQuery);