用一个目标（CSS3）过渡两次

Question

我正在尝试使用CSS3及其“过渡”和“目标”功能对一种幻灯片放映进行动画制作。

到目前为止我有这样的：http://dk8.co/slide.html

使用CSS：

[id*=thumbs] { 
    position: relative; 
    left: 0px; 
    top: 0px; 
    -webkit-transition: all 1s; 
    transition: all 1s; 
} 

[id*=thumbs]:target { 
    position: relative; 
    top: -100px; 
} 

#body { 
    position:relative; 
    left: 0px; 
    top: 0px; 
    height: 500px; 
    width: 600px; 
    overflow:hidden; 
} 

和HTML：

<div style="position:absolute; top:200px; left:200px;width:600px;"> 
<p align="center"><a href="#thumbs">up</a> 
<div id="body"> 
<table width="580" border="0" cellpadding="5" id="thumbs"> 
    <tr> 
    <td><img src="" width="100%" height="160" /></td> 
    <td><img src="" width="100%" height="160" /></td> 
    </tr> 
    <tr> 
    <td><img src="" width="100%" height="160" /></td> 
    <td><img src="" width="100%" height="160" /></td> 
    </tr> 
    <tr> 
    <td><img src="" width="100%" height="160" /></td> 
    <td><img src="" width="100%" height="160" /></td> 
    </tr> 
    <tr> 
    <td><img src="" width="100%" height="160" /></td> 
    <td><img src="" width="100%" height="160" /></td> 
    </tr> 
</table> 
</div> 
</div> 

但是，我只能拿到发生一次转变。我希望能够再次点击“up”并让它向上移动一些。有什么办法可以做到吗？

在此先感谢！

Answer 1

这是一个非常简单的例子，用translate来代替。它实现了你想要做的而没有任何JavaScript。

看一看：http://www.designmadeingermany.de/slideshow/

浏览源代码，它的克里斯塔尔明确。