CSSで画像をアニメーション表示

説明

JavaScriptを利用せずに画像をアニメーション表示する為の方法です。と言ってもマウスオーバーした時の話しです。擬似要素である :hover を用いて実装しています。z-index , position , display:none; を利用し、画像をすっ飛ばしたりしていて力技のような気がしないでもないですが、とても面白い発想だと思いました。ここでは表現出来れば良いということでかなり手抜きです。また、写真を一枚一枚切り替えるだけなので、アニメーションという表現もピンとこないかもしれませんが、それっぽい画像を並べれば動いているように見えます。普通にアニメーションGIFを使えばいいじゃないかと言うのと、構造的に無理があると言うのは無しの方向でお願いします。CSSで画像を拡大表示を併せたりして応用すればギャラリーなどで上手い具合に使用出来るのではないでしょうか。

最低限必要な記述

CSS

cssファイル

HTML

<ul id="ani">
<li><a id="ph1" href="./ph01.jpg"><img src="./ph01.jpg" alt="レインボーブリッジ1" /></a></li>
<li><a id="ph2" href="./ph02.jpg"><img src="./ph02.jpg" alt="レインボーブリッジ2" /></a></li>
<li><a id="ph3" href="./ph03.jpg"><img src="./ph03.jpg" alt="レインボーブリッジ3" /></a></li>
<li><a id="ph4" href="./ph04.jpg"><img src="./ph04.jpg" alt="レインボーブリッジ4" /></a></li>
<li><a id="ph5" href="./ph05.jpg"><img src="./ph05.jpg" alt="レインボーブリッジ5" /></a></li>
<li><a id="ph6" href="./ph06.jpg"><img src="./ph06.jpg" alt="レインボーブリッジ6" /></a></li>
<li><a id="ph7" href="./ph07.jpg"><img src="./ph07.jpg" alt="レインボーブリッジ7" /></a></li>
<li><a id="ph8" href="./ph08.jpg"><img src="./ph08.jpg" alt="レインボーブリッジ8" /></a></li>
<li><a id="ph9" href="./ph09.jpg"><img src="./ph09.jpg" alt="レインボーブリッジ9" /></a></li>
<li><a id="ph10" href="./ph10.jpg"><img src="./ph10.jpg" alt="レインボーブリッジ10" /></a></li>
<li><a id="ph11" href="./ph11.jpg">>img src="./ph11.jpg" alt="レインボーブリッジ11" /></a></li>
<li><a id="ph12" href="./ph12.jpg"><img src="./ph12.jpg" alt="レインボーブリッジ12" /></a></li>
<li><a id="ph13" href="./ph13.jpg"><img src="./ph13.jpg" alt="レインボーブリッジ13" /></a></li>
<li><a id="ph14" href="./ph14.jpg"><img src="./ph14.jpg" alt="レインボーブリッジ14" /></a></li>
<li><a id="ph15" href="./ph15.jpg"><img src="./ph15.jpg" alt="レインボーブリッジ15" /></a></li>
<li><a id="ph16" href="./ph16.jpg"><img src="./ph16.jpg" alt="レインボーブリッジ16" /></a></li>
</ul>