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

【问题标题】：Transition twice with one target (CSS3)使用一个目标转换两次 (CSS3)
【发布时间】：2011-11-23 17:35:00
【问题描述】：

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

使用 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>

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

提前致谢！

【问题讨论】：

在 CSS 中不可能，你愿意加入一点 JS 吗？
是的，如果可行的话，我肯定会包含一些 JS...

标签： css transition target css-transitions

【解决方案1】：

这是一个使用 translate 的非常简单的示例。它无需任何 javascript 即可实现您想要做的事情。

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

浏览源代码，清晰明了。

【讨论】：