Html 设置引导转盘内元素的动画

有谁能给我举一个关于如何用css3制作动画的例子，css3是典型的引导旋转木马中的元素

我将追求这种效果（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>

C
$（'旋转木马-1'）。旋转木马({
间隔时间：6000
});

它太旧了，但如果有人还在这里寻找答案，它是：

HTML JS

---

它太旧了，但如果有人还在这里寻找答案，它是：

HTML JS

---

为什么您有两个时间声明

.6s

和结尾处的

0s

，我觉得这不合适。尝试删除

0s

这是为了延迟，删除没有任何区别。为什么您有两个时间声明

.6s

和结尾处的

0s

，我觉得这不合适。尝试删除

0s

这是为了延迟，删除没有任何区别。虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，仅链接的答案可能会无效。虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接以供参考。如果链接页面发生更改，则仅链接的答案可能无效。

        <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);