アニメーション一覧

サイトをリッチにしたい時に参考になればと思います

デメリット
マシンスペックに依存するので閲覧者によっては重くサイトが感じる
更新性が低下する場合があり
連続か一回だけかしか選択できない

アニメーション

LOADING

くるっと戻る

LOADING

 

 

 

数字が回ります
そして止まります

1

ボーダー色変化

幕が下がります

見出しが流れてきます〜〜♪

パララックス

パララックス2

背景色アニメーション

デモは単色ですがグラデーションもアニメーションで動かせます

背景色アニメーション

編集画面で変更可能

切り替わり時、違和感あり

ホバーアニメーション

行にカーソル当てるとが画像に色が復活

見出しが入ります

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出しが入ります

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出しが入ります

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

CSSパーツ集