CSS3アニメーションはたいていの場合、ホバー時（:hover）に仕込まれるものが多いと思います。 ここでは他の疑似クラス「:active」や「:focus」などやMedia Queriesに仕込んでみるチュートリアルを紹介します。下記は各ポイントを意訳したものです。 「:acti…

ボタンをCSS3で美しくスタイルするだけでなく、ホバー・アクティブ時にもかっこいいCSS3アニメーションを使った7種類のテクニックを紹介します。ちょっと前まではこういったアニメーションはFlashかJavaScriptを使用しないとでしたが、今ではもうCSS3でとな…

画像をホバーすると、小気味良いアニメーションを伴ってキャプションに替えるCSS3のテクニックを紹介します。 デモは10種類あり、CSSでここまでできるのか！って感じです。

パネルのスライド、コンテンツ・画像スライダー、ナビゲーション、アコーディオン、スピナー、棒グラフなど、アニメーションを伴ったさまざまなコンテンツを簡単に実装できるスクリプトを紹介します。 jQueryなど他のスクリプトに依存せず、単独で動作します…

Flashはもちろん、jQueryなどのJavaScriptも使用せずに、CSS3アニメーションのかっこいいナビゲーションを実装するチュートリアルを紹介します。 01：エレメントのサイズ変更、背景カラーを変更。 02：アイコンのサイズ変更、テキストを天地からスライド。 0…

アニメーションを伴ったテキストシャドウや半透明を利用して、ブラーのエフェクトを使ったナビゲーションを実装するCSS3のチュートリアルを紹介します。 サイトのキャプチャBlur Menu with CSS3 Transitions 7つのデモ 7つのデモの実装7つのデモデモは7種類…

フェードイン、フェードアウト、バウンド、シェイク、回転などのアニメーションを簡単に使用できるクロスブラウザ対応のスタイルシートを紹介します。「animate.css」を外部ファイルとして指定し、アニメーションを加えたいエレメントにclassを付与するだけ…