今回は素敵なCSS3アニメーションを用意してくださっているサイトをご紹介します。
以前紹介した記事はこちら
今回は一部jsやSVGと組合せているものもあります。
また、一部IEや古いブラウザなどに対応していないものが多いので、そちらは各ページをご確認ください。
目次
Creative Button Styles
DEMO サイト
ボタンなどのhoverアニメーションに使えそうなアニメーションです。
押して楽しいボタンがいっぱいあります。
Creative Link Effects
DEMO サイト
こちらもボタンなどのhoverアニメーションに使えそうなアニメーションです。
動き自体はシンプルながらもおしゃれで使い勝手もよさそう。
Button Styles Inspiration
DEMO サイト
またまたボタンなどのhoverアニメーションに使えそうなアニメーションです。
こちらはとにかくサンプルの量が多いので、気に入った動きを見つけられそうです。
Some More Subtle Hover Effect Ideas
DEMO サイト
写真にhoverをすると、素敵な効果を与えてくれるアニメーションです。
お気に入り登録させるボタンがあるものなどがあり、使い勝手がよさそうです。
Shape Hover Effect with SVG
DEMO サイト
css、SVG・jsを使用しているアニメーションです。
作りはちょっと複雑かもしれませんが、デモのhoverした時何が出てくるのかというワクワク感が素敵です。
Caption Hover Effects
DEMO サイト
hover時にキャプションとボタンをおしゃれに出してくれるアニメーション。
『クリックできる』というのが認識しやすくなれば使い勝手がよさそうです。
style="display:block"
data-ad-client="ca-pub-4667789978705365"
data-ad-slot="9480048027"
data-ad-format="auto">
Tilt Hover Effects
DEMO サイト
画像に上からフィルターをかけて、hover時にアニメーションしてくれます。
サイトの雰囲気がおしゃれになりそうです。
TEXT STYLES & HOVER EFFECTS
DEMO サイト
テキストに対してhoverアニメーションを付けられます。
スタイリッシュでかっこいいアニメーションですね。
Circle Hover Effects
DEMO サイト
丸型の要素へのhoverアニメーションです。
使い勝手はともかくとしてデモ3や6の動きが個人的に面白いなあと思います。
Direction-Aware Hover Effec
DEMO サイト
マウスを要素上で移動させると、hoverで出現するキャプションがマウスに沿って動いてくれます。
説明が下手なのでとりあえずデモを触っていただければと思います…。面白いです。
jQueryも使用しています。
