css - css3 スライダーの自動回転

Question

アコーディオンスライダーを持っています。CSS3を使用しているのは、jqueryを使用せずに純粋なcss3アニメーションのみでスライダーを自動回転させる方法ですか? 私のサイトのURLはこちらです。

Answer 1

このような？

http://jsfiddle.net/coma/bXDHE/30/

HTML

<div class="neat">
    <div>
        <img src="http://www.menucool.com/slider/prod/image-slider-4.jpg"/>
        <img src="http://blogs.mathworks.com/pick/files/zebrainpastelfield.png"/>
        <img src="http://www.freewarepocketpc.net/wp7/img/image-effecter-free.png"/>
        <img src="http://www.poyraz.gen.tr/wp-content/uploads/images_4781_1.jpg"/>
    </div>
</div>

CSS

div.neat {
    font-size: 500px;
    width: 1em;
    height: 200px;
    overflow: hidden;
}

div.neat > div {
    position: relative;
    left: 0;
    width: 4em;
    -webkit-animation: loop 10s infinite;
    -moz-animation: loop 10s infinite;
}

div.neat > div > img {
    width: 1em;
    display: block;
    float: left;
}

@-webkit-keyframes loop {
    0% { left: 0; }
    20% { left: 0; }
    25% { left: -1em; }
    45% { left: -1em; }
    50% { left: -2em; }
    70% { left: -2em; }
    75% { left: -3em; }
    95% { left: -3em; }
}

@-moz-keyframes loop {
    0% { left: 0; }
    20% { left: 0; }
    25% { left: -1em; }
    45% { left: -1em; }
    50% { left: -2em; }
    70% { left: -2em; }
    75% { left: -3em; }
    95% { left: -3em; }
}