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

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

デモのキャプチャ

LeaVerou / animatable
デモページ

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

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

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

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

デモのキャプチャ

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

下記に数多くあるデモから、いくつか紹介します。
デモの下にある「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
遠近効果の値をアニメーションで変更します。

top of page

©2017 coliss