サイトをリッチに見せるためのCSSアニメーションまとめ

・シンプル・分かりやすい・綺麗
・ポップ・勢いがいい
・スタイリッシュ・かっこいい・スピーディー
・かわいい・柔らかい

シンプル・分かりやすい・綺麗

● フェードイン

● スライドイン

● ズームイン

ポップ・勢いがいい

● ぽよよんと跳ねる

● ぽよよんと跳ねる2

● ぽよよんと跳ねる3

● ななめから出てくる

● ポップアップ

● ぽよぽよ収縮する

スタイリッシュ・かっこいい・スピーディー

● きらん（ホバーしてみてください）

● 背景色が流れてくる

背景色が流れてくる
アニメーション

● 文字がぬるりと現れる

文字がぬるりと現れるサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト

● 背景色が消えてから表示される

背景色が消えてから表示される

● 線が伸びる

かわいい・柔らかい

● フェードアップ

● ボーダーが緩やかにつく

● 文字が滑らかに表示される

文字が滑らかに表示される

※ IEではclip-pathが非対応なため、最初から表示されている状態になります。