CSSアニメーションでゆらゆらさせる

サンプル

http://codepen.io/skwbr/full/JdJWqV
（※横着してwebkitプレフィックスしかつけていないのでChromeからどうぞ...）

解説

フワフワというかゆらゆらというか宙に浮いているようなアニメーションをさせる場合。

<ul>
<li><a href="#"><img src="hogera.png"></a></li>
<li><a href="#"><img src="hogera.png"></a></li>
<li><a href="#"><img src="hogera.png"></a></li>
</ul>

みたいな場合を考えるとき

@keyframes horizontal {
    0% { transform:translateX( -3px); }
  100% { transform:translateX(  0px); }
}
@keyframes vertical {
    0% { transform:translateY(-10px); }
  100% { transform:translateY(  0px); }
}

みたいに左右に揺れるアニメーションと、上下に揺れるアニメーションを各々定義しておいて、例えばliには前者、その中のaには後者を当てるなどして、平面上を上下左右にゆらゆらしているように見せる。

li {
  animation: horizontal 1s ease-in-out infinite alternate;
}

li a {
  animation: vertical 1s ease-in-out infinite alternate;
}

また複数のものがランダムにバラバラに動いているように見せたいときは、
単純にアニメーションの種類を増やしたり、

li:nth-child(1) { animation-duration: 1.1s}
li:nth-child(2) { animation-duration: 1.3s}
li:nth-child(3) { animation-duration: 1.5s}

のように animation-duration (アニメーションにかける尺)をキリの悪いバラバラ指定にするとランダム感が増す。

（※ベンダープレフィックスは心のなかで補ってください）