用一個目標（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/

瀏覽源代碼，它的克里斯塔爾明確。