CSSのすぐに使える小技から驚きのスゴ技まで!CSSアニメーションの素晴らしいアイデアのまとめ

ここ2, 3年、CSSアニメーションの進化がすごいですね!
次のプロジェクトにさっそく使ってみたくなるようなものから、こんなことも出来るのか!という驚きのテクニックまで、CSSアニメーションのスゴ技・小技を紹介します。

デモのキャプチャデモのアニメーションGIF

Animated Gameboy in CSSのデモのアニメーションGIF

まずは、CSSで作られたゲームボーイ。
上はデモをアニメーションGIFにしたものですが、下は生HTMLと生CSSです。
そのままのアニメーションでも驚きですが、ホバー時にはスケルトンになります。

GAME BOY
C
GAME BOY
Nintendo
.
B
A

Animated Gameboy in CSS -GitHub

円、四角、三角、そしてイルカに変形するアニメーション。
リズムカルなので、ずっと見ていても飽きないです。

Circle, square, triangle, dolphin

ここから、少し実用的なデモになります。
カード型UIにちょっとだけアニメーションを加えたデモ。下記だと狭いので、フルサイズでお楽しみください。

Card Article UI

アニメーションで切り換える新しいタイプのタブ型コンテンツです。

3D Cube for tabbed content

デフォルトは2つの円が重なってるだけですが、アニメーションはコマの終わりまでしっかりデザインされています。

CSS Fill Murray welcome button!

簾のように表示されるセレクトメニュー。一度きりの動きなので、右下「Rerun」で繰り返し楽しめます。

Select Input Interaction

美しくデザインされたエラスティック メニュー。SVGもCanvasも無しです。

elastic menu (no SVG, no canvas)

プロセスもアニメーションを伴うと素敵に見えます。

Process line

こちらもシンプルながら、アニメーションがいい感じのプロセスバーです。

pager-dots concept

ページにこういったラインが入ってるのも面白いですね。

Elastic Animation CSS Only

ちょっと面白いアニメーションが加わったスイッチ型のボタン。

Switcher

じりじり永遠に動くボタン。ウゴウゴルーガを思い出しました。
ページ上の全エレメントをこれにしたら、楽しいだろうなぁw

Sketchy Button

マンガちっくな3Dのボタン。

Fancy 3D Button

2D, 3Dのさまざまな変形を備えたボタン。
シンプルで非常に気持ちいいアニメーションです。

Simple Example 2-3D Transforms for social-links

くるっと回るかわいいボタン。
くるっくるっくるっでもよさそうですね。

Rotating Icon Buttons

動きはシンプルですが、非常に美しいボタンですね。

Button Animation

こちらは少し大胆な動きのボタン。

Cool Hover Button

思わずクリックしたくなるような勢いのあるボタン。

Social button effects #1

思いっきりぐるぐる回るスピナータイプのボタン。

Button Spinner Test

Material Design向けのさまざまなアニメーションのボタン。

Material design : buttons

一味ちがった新鮮な動きを備えたボタン。

Button Hover Animations

美しいエフェクトを備えたボタン。

Hover animated buttons

最後は、CSSの力技。
ブラウザに画像を表示しているように見えるかもしれませんが、画像は一切無し、CSSで実装されています。img2cssはどんな画像でもピュアCSSに変換します。

デモのキャプチャ

img2css
写真: 写真AC

top of page

©2017 coliss