アニメーション

CSS3アニメーションを「:hover」だけではなく、他にも仕込んでみるチュートリアル | コリス

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

ボタンのクリックを楽しくするCSS3アニメーションのテクニックいろいろ | コリス

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

まるでFlashのように画像とキャプションをアニメーションで替えるテクニックいろいろ | コリス

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

多彩なアニメーションが実装できる2.3KBの超軽量スクリプト -jsMorph | コリス

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

確実に進化している!CSS3アニメーションで実装する10種類のナビゲーション | コリス

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

CSS3アニメーションでブラー効果をかっこよく使ったナビゲーションを実装するチュートリアル | コリス

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

classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート -Animate.css | コリス

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