CSS3アニメーションで動きをつけてインタラクティブに

円形にするコード

<img src="/%E7%94%BB%E5%83%8F%E3%81%AEURL" alt="" width="300" height="300" class="alignleft img-circular" />

マウスカーソルを画像に合わせてみると…

ブルブルシェイク(animate-shake)

<img class="img-circular animate-shake" src="/%E7%94%BB%E5%83%8F%E3%81%AEURL" alt="Circular image" width="300" height="300" />

くるっと回転(animate-rotate)

<img class="img-circular animate-rotate" src="/%E7%94%BB%E5%83%8F%E3%81%AEURL" alt="Circular image" width="300" height="300" />

ズームイン(animate-zoom-in)

<img class="img-circular animate-zoom-in" src="/%E7%94%BB%E5%83%8F%E3%81%AEURL" alt="Circular image" width="300" height="300" />

ズームアウト(animate-zoom-out)

<img class="img-circular animate-zoom-out" src="/%E7%94%BB%E5%83%8F%E3%81%AEURL" alt="Circular image" width="300" height="300" />

ホバーシャドウ(animate-shadow)

<img class="img-circular animate-shadow" src="/%E7%94%BB%E5%83%8F%E3%81%AEURL" alt="Circular image" width="300" height="300" />

スウィング(animate-swing)

<img class="img-circular animate-swing" src="/%E7%94%BB%E5%83%8F%E3%81%AEURL" alt="Circular image" width="300" height="300" />

ぐらぐら(animate-wobble)

<img class="img-circular animate-wobble" src="/%E7%94%BB%E5%83%8F%E3%81%AEURL" alt="Circular image" width="300" height="300" />

ぴくぴく(animate-wiggle)

<img class="img-circular animate-wiggle" src="/%E7%94%BB%E5%83%8F%E3%81%AEURL" alt="Circular image" width="300" height="300" />

バウンド(animate-bounce)

<img class="img-circular animate-bounce" src="/%E7%94%BB%E5%83%8F%E3%81%AEURL" alt="Circular image" width="300" height="300" />

パルス(animate-pulse)

<img class="img-circular animate-pulse" src="/%E7%94%BB%E5%83%8F%E3%81%AEURL" alt="Circular image" width="300" height="300" />

複数組み合わせた場合

<img class="img-circular animate-shadow animate-shake animate-zoom-in" src="/%E7%94%BB%E5%83%8F%E3%81%AEURL" alt="Circular image" width="300" height="300" />