[CSS]CSS3アニメーションの効果的な使い方

CSS3のアニメーション機能「CSS Transitions」をウェブサイトのどこにどのように使うのがよいかを検証するチュートリアルをCarsonifiedから紹介します。

サイトのキャプチャ

Sexy Interactions with CSS Transitions

「CSS Transitions」の対応ブラウザは、WebkitベースのブラウザであるChrome、Safariとなっています。

下記にさまざまなサイトに利用できる、CSS Transitionsを使用したテクニックを紹介します。

1. アニメーションで背景色を変更

デモのキャプチャ

マウスのホバーで、背景色をアニメーションで変更します。

CSS

2. アニメーションの速度

デモのキャプチャ

アニメーションの速度をそれぞれ変更して検証します。
このような大きなオブジェクトの場合は、アニメーションのスピードが遅いとユーザーはいらいらする可能性があります。

3. アニメーションでリンクの背景色を変更

デモのキャプチャ

マウスのホバーで、リンクの背景色をアニメーションで変更します。
上記「2. アニメーションの速度」よりスペースが小さいため、アニメーションは同じスピードでも遅く感じます。

4. カラーのアニメーション

デモのキャプチャ

一番目は背景色を指定せず「transparent」にしたもの、二番目は背景色を指定したもの、三番目は背景色を指定し更に背景をもったものです。
三番目のように一様な背景で自然に見せるためには、四番目のRGBaを使用します。これは特に最近流行のざらっとしたテクスチャに有効です。

sponsors

top of page

©2018 coliss