CSSのすぐに使える小技から驚きのスゴ技まで！CSSアニメーションの素晴らしいアイデアのまとめ
Post on:2015年11月17日
sponsors
ここ2, 3年、CSSアニメーションの進化がすごいですね！
次のプロジェクトにさっそく使ってみたくなるようなものから、こんなことも出来るのか！という驚きのテクニックまで、CSSアニメーションのスゴ技・小技を紹介します。
Animated Gameboy in CSSのデモのアニメーションGIF
まずは、CSSで作られたゲームボーイ。
上はデモをアニメーションGIFにしたものですが、下は生HTMLと生CSSです。
そのままのアニメーションでも驚きですが、ホバー時にはスケルトンになります。
Animated Gameboy in CSS -GitHub
円、四角、三角、そしてイルカに変形するアニメーション。
リズムカルなので、ずっと見ていても飽きないです。
Circle, square, triangle, dolphin
ここから、少し実用的なデモになります。
カード型UIにちょっとだけアニメーションを加えたデモ。下記だと狭いので、フルサイズでお楽しみください。
アニメーションで切り換える新しいタイプのタブ型コンテンツです。
デフォルトは2つの円が重なってるだけですが、アニメーションはコマの終わりまでしっかりデザインされています。
CSS Fill Murray welcome button!
簾のように表示されるセレクトメニュー。一度きりの動きなので、右下「Rerun」で繰り返し楽しめます。
美しくデザインされたエラスティック メニュー。SVGもCanvasも無しです。
elastic menu (no SVG, no canvas)
プロセスもアニメーションを伴うと素敵に見えます。
こちらもシンプルながら、アニメーションがいい感じのプロセスバーです。
ページにこういったラインが入ってるのも面白いですね。
ちょっと面白いアニメーションが加わったスイッチ型のボタン。
じりじり永遠に動くボタン。ウゴウゴルーガを思い出しました。
ページ上の全エレメントをこれにしたら、楽しいだろうなぁｗ
マンガちっくな3Dのボタン。
2D, 3Dのさまざまな変形を備えたボタン。
シンプルで非常に気持ちいいアニメーションです。
Simple Example 2-3D Transforms for social-links
くるっと回るかわいいボタン。
くるっくるっくるっでもよさそうですね。
動きはシンプルですが、非常に美しいボタンですね。
こちらは少し大胆な動きのボタン。
思わずクリックしたくなるような勢いのあるボタン。
思いっきりぐるぐる回るスピナータイプのボタン。
Material Design向けのさまざまなアニメーションのボタン。
一味ちがった新鮮な動きを備えたボタン。
美しいエフェクトを備えたボタン。
最後は、CSSの力技。
ブラウザに画像を表示しているように見えるかもしれませんが、画像は一切無し、CSSで実装されています。img2cssはどんな画像でもピュアCSSに変換します。
sponsors
