css3 slider 自动旋转

Question

我有一个 Accordion slider 。哪个使用 CSS3 是他们不使用 jquery 但仅使用纯 css3 动画使 slider 自动旋转的方法？ Here is the URL to my site.

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