css - css3滑块自动旋转

Question

我有一个手风琴滑块。使用 CSS3 是他们使滑块自动旋转而不使用 jquery 但仅使用纯 css3 动画的一种方法？ 这是我网站的网址。

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