用一个目标(CSS3)转换两次

Question

我正在尝试使用CSS3及其"过渡"one_answers"目标"功能为幻灯片制作动画。

到目前为止，我有这个: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>

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

提前感谢!

Answer 1

下面是一个使用translate代替的非常简单的示例。它可以实现你想要做的事情，而不需要任何javascript。

请看:http://www.designmadeingermany.de/slideshow/

浏览源代码，非常清晰。