CSS3アニメーションの基本的な実装例のまとめ

CSSのプロパティ一つに対して、値を二つ（開始と終了）変更し、さまざまなCSS3アニメーションの基本的な実装例を楽しめるデモサイトを紹介します。

LeaVerou / animatable
デモページ

[ad#ad-2]

デモページを楽しむには、Chrome, Safariで閲覧ください。
Firefoxでは一部動作しません。

アニメーションのスタートは、2つあります。

• マウスオーバーで一つ一つのアニメーションがスタート
• アニメーションが全部同時にスタート

全部同時にアニメーションをスタートさせるには、「Animate all」ボタンをクリックします。

全部同時にアニメーションすると、何がなにやら分からない状態にw

[ad#ad-2]

下記に数多くあるデモから、いくつか紹介します。
デモの下にある「background-color」などは、そのプロパティの値を変更してアニメーションしている、という意味です。

background-color

背景色をグレーからブラックにアニメーションで変更します。

background-position

背景のポジションをアニメーションで変更します。

border-radius

矩形から角丸にアニメーションで変更します。

border-width

ボーダーのサイズを0から75pxにアニメーションで変更します。

box-shadow

ボックスシャドウで全体をアニメーションでぼかします。

color

フォントのカラーをホワイトからブラックにアニメーションで変更します。

font-size

フォントのサイズを大きくアニメーションで変更します。

letter-spacing

文字間を0から100pxにアニメーションで変更します。

line-height

行間を10pxから300pxにアニメーションで変更します。

opacity

不透明度を1から0にアニメーションで変更します。

text-shadow

テキストシャドウのぼかしをアニメーションで変更します。

text-shadow

テキストシャドウの上下左右の位置とカラーをアニメーションで変更します。

transform

角度をアニメーションで変更します。

transform

角度とサイズをアニメーションで変更します。

transform

遠近効果の値をアニメーションで変更します。