CSS3アニメーションをうまく活用する方法:チュートリアル、サンプルコード、サンプル

  • ウェブサイトのデザイン
  • 更新:Aug 28、2013

JSとjQueryを使用するとき、私たちはアニメーションを完全に制御できますし、素晴らしい効果を生み出すこともできますが、価格はかなり高いです。 処理時間、ブラウザ間の互換性(たとえば、モバイルデバイスはJSについてはかなり異なる)、コードの複雑さ自体は、アニメーションインターフェイスを作成する際に留意すべきポイントです。

では、今日、CSSのアニメーションとトランジションを使用してJSを回避する方法を見ていきます。 非常に基本的な手順から、アコーディオンパネルやアニメーションサブメニューのような素晴らしい効果まで説明します。

座席、メモ帳、そして実際のブラウザ(IE以外のもの)を手に入れて始めましょう。

ウォームアップ

CSSアニメーションの使用には、いくつかの利点(そして私たちの生活の中ではすべての欠点)があります。 あなたの上司または顧客にそれらを販売する必要がある場合、これはあなたが覚えておく必要があります:

  • ハードウェアアクセラレーション(HTML5実装)を利用できるため、潜在的に高速です。
  • モバイルデバイスでのパフォーマンスが向上し、タッチイベントを追跡するための特定のコードは必要ありません
  • JSはブラウザによって解釈される必要があり、ブラウザを破る可能性ははるかに大きい。 だから、CSSが失敗すると、それは静かに失敗し、JSはページ全体を破壊することができます
  • 彼らはかなり良いブラウザサポートを持っています(このサイトはそれに関する特定の統計をチェックするのに役立ちます: http://caniuse.com/#search )

CSS3アニメーションの例

この記事の内容を始める前に、純粋なCSSで作成された美しいアニメーションを見てみましょう。

純粋なCSSのTwitterの失敗のクジラ

アニメーション失敗したクジラ

スティーブンデニス、 これを実際に見てください。

純粋なCSSスクロールコークス缶
CSS 3アニメーションの例:スクロールコークス缶

ローマのCortes、 これを実際に見てください。

純粋なCSSウォーキングマン

CSS 3アニメーションの例:ウォーキングマン

アンドリュー・ホイヤー(Andrew Hoyer) これを実際に見てください。

あなたの手を汚くする

コードを開始しましょう。 CSS擬似クラスを使用してアニメーションをトリガーします。 正直言って、多くの開発者がJSを使用してアニメーションを有効または無効にすることをお勧めしますが、ここでは簡単な方法を紹介します:

#test {背景:赤。 } #test:hover {background:green;} #test:アクティブ{背景:青; #test:target {背景:黒;} }

使用するいくつかの疑似クラスがありますが、あなたはそのアイディアを持っています! #test要素をクリックすると(リンクであると仮定して)、次のようになります。

  • 通常状態:背景は赤色になります
  • ホバー:マウスが要素エリアに入ると、緑色の背景が表示されます
  • アクティブ:その上でカーソルをクリックすると、マウスボタンがまだ押されている間、背景色は青色になります
  • ターゲット:現在のページのURLに#testがある場合、この要素は黒色になります

これらのそれぞれは、CSSアニメーションに使用できます。たとえば、2リンクを作成して、このコードでターゲット擬似要素を使用してCSSアニメーションをアクティブまたは非アクティブにすることができます。

<a href='#test'>有効にする</a> <a href='#'>無効にする</a>

CSSトランジション

CSSの遷移はスムーズに最初の状態から最後の状態に変わります。 したがって、影響を受ける時間と各プロパティとアニメーションの仕方を、「トランジション」プロパティを使ってメインセレクタで定義します。 例を見てみましょう:

.test {/ *遷移プロパティ期間タイミング関数、* /色:青。 トランジション:カラー2、フォントサイズ2のイーズアウト。 .test:ホバー{色:赤; テスト:アクティブ{フォントサイズ:200%;}。 }

.test要素を動かすと、色が青から赤に徐々に変わります(いいパレットですよね?)。 要素をクリックすると、フォントサイズがデフォルトのフォントサイズの200%に徐々に増加します。

また、アニメーションに使用できる「時間」がどのように費やされるかということを「緩和」として設定した「遷移タイミング」プロパティもあります。 可能な値は次のとおりです。

  • リニア:最初から最後まで同じスピード
  • イーズイン:スロースタート
  • イーズ・アウト:スロー・エンド
  • 緩和:遅いスタート、途中で速い、遅いエンド
  • イーズインアウト:スロースタート、スローエンド
  • キュービックベジェ(a、b、c、d):カスタムスピード

3次ベジェ関数は、アニメーションの速度X durationの数学的曲線を表す4から0まで変化する1数を持つカスタムアニメーションを作成します。

ブラウザの互換性を高めるには、オペラ、Firefox、Webkitのベンダープレフィックスを次のように使用することを検討してください。

div {width:400px; -o-transition:幅2; -moz-transition:幅2; -webkit-transition:幅2; 遷移:幅2。 }

また、ブラウザの幅(モバイルデバイス、タブレット)に応じて、さまざまなトランジションを定義するためにメディアクエリを使用することもできます。 これは簡単な例です:

body {フォントサイズ:1em; @media画面と(最大幅:800px){本体{フォントサイズ:0.8em;} @media画面と(最大幅:400px){本体{フォントサイズ:0.7em;} }}

ここでは、ブラウザの幅を広げるとフォントサイズが突然変更されます。 このコードは、起こらないようにして、よりスムーズな移行を行います:

body {-o-transition:フォントサイズ.5s線形; -moz-transition:フォントサイズ.5sリニア。 -webkit-transition:フォントサイズ.5sリニア。 遷移:フォントサイズ.5s線形。 }

幅、色、パディング、メニュー表示を変更したい場合は、ポートレート/ランドスケープのディスプレイやサイズが異なる場合にも、これを使用できます。

CSSアニメーション - 本当の楽しみが始まります

アニメーションは、単一のセレクタで定義された一連のトランジションです。 CSSアニメーションを定義するには、2の手順に従う必要があります。

@keyframeルールは、一連のアニメーションステップを定義するために使用され、固有の名前と、このアニメーションの仕組みを記述するスタイルによって定義されます。 いつものように、この例のようにいくつかのベンダー接頭辞が必要になります:

/ *各ベンダーの同じコード* / @ -o-keyframe my-animation {... @ -moz-keyframe my-animation {... @ -webkit-keyframe my-animation {... / *アニメーション名* / @keyframe my-animation {/ *フレームセレクタ* / 0%{/ *フレームスタイル* /左:0px; 上:0px; } 25%{左:200px; 上:0px; } 50%{左:200px; 上:200px; } 75%{左:0px; 上:200px; } 100%{左:0px; 上:0px; }}

したがって、各スタイルは、フレーム/タイムフレーム(フラッシュアニメーションのフレームのような)によってパーセントで定義され、スタイルはそこに適用される必要があります。 このキーフレームは、たとえば、要素が左、次に上、右、次に下に移動することを示します。

ステップ1を実行してキーフレームを作成したら、実際に要素に適用することができます。 それから、CSSトランジションで行ったのと同じロジックを使用しますが、今のところ、「トランジション」は非常に複雑なアニメーションです。

それを適用するために、アニメーションプロパティを使用し、7サブプロパティを持っています:

  • 名前:その一意の識別子
  • 所要時間:0%から100%までの所要時間
  • タイミング機能:移行タイミング機能とほぼ同じ
  • 遅延:0%を開始するまでにどれくらい時間がかかりますか?
  • 反復回数:何回繰り返しますか(無限ループの場合は無限大)
  • 方向:通常または代替(逆)
  • 再生状態:アニメーションが実行中または一時停止中の場合

これは、#test要素がページのターゲットであるときにアニメーションを#test要素に適用します。

#test:target {/ * animation-name | 期間 タイミング関数 遅延|反復カウント| 方向 play-state * / animation:私のアニメーション10s線形0s無限通常実行。 }

これを念頭に置いて、いくつか素晴らしい例を作成することができます。

CSSのみアコーデオン

CSSアニメーションを使用して折りたたみ可能なパネルを作成します。 以下は基本的なHTML構造です:

<div class = "accordion"> <a href="#tab1">タブ1 </a> <div id = "tab1"> <p>テキスト1 </p> </div> <a href = "# tab2 ">タブ2 </a> <div id =" tab2 "> <p>テキスト2 </p> </div> <a href="#tab3">タブ3 </a> <div id =" tab3 "> <p>テキスト3 </p> </div> </div>

これにより、パネルと、それぞれのパネルをトリガーするリンクが作成されます。 マジックが起こる場所はここにあります:

/ *アコーディオンの内側にあるすべてのdiv * / .accordion div {/ *は、デフォルトでは非表示になっています* / height:0; オーバーフロー:隠れています。 / *黒魔術* /遷移:高さ1; 上記のdivがターゲットの場合* / .accordion div:target {/ * height:autoは機能しませんが、これは正常に機能します* / height:80px; }

かなり簡単ですね? そして、あなたはこのためにJSを使ってあなたの人生を過ごしましたか? :)

サブメニュー付きCSSのみのメニュー

これはもう少し単純なアプリケーションです。 あなたは確かにあなたのサイト内にナビゲーションメニューを持っており、しばしばそこにいくつかのサブメニューを使う必要があります。 アイテムを表示および非表示する最善の方法はjQueryを使用することです。 さて、このコードをテストした後、もう一度考えてみましょう:

<nav> <ul> <li> <a href='#item1'>アイテム1 </a> <div> <ul> <li> <a href='#item11'>アイテム1.1 </a> </ li> <li> <a href='#item12'>アイテム1.2 </a> </li> </ul></div> </li> <li> <a href='#item2'>アイテム2 </a> <div> <ul> <li> <a href='#item21'>アイテム2.1 </a> </li> <li> <a href='#item22'>アイテム2.2 </a> </li> </ul></div> </li> </ul> </nav>

そして、ここで始まります。

{/ *リンクをもう少し良くする* / display:block; パディング:4px; } nav {text-align:center;} / *任意のメニュー(メインメニューを含む)* / nav ul {display:inline-block;} リストスタイル:なし。 * / float:left;} nav> ul> li {/ *横方向の項目(縦方向もうまくいきます) } nav li div {/ *サブメニューを折りたたむ* / height:0;} オーバーフロー:隠れています。 / * Houdiniの気持ち* / transition:身長1; }ナビゲーション:ホバー> div {高さ:56px;} }

集計

これは確かに始動ガイドです。 CSSだけのアニメーションや、今後も確実に多くのものを使用して行うことができる他のクールな効果がたくさんあります。

あなたはこれを以前に使ったことがありますか? CSSアニメーションのもう一つの良いアプリケーションを考えてみませんか? コメントを使ってあなたの考えを共有してください!

ロチェスターオリベイラについて

私はブラジルのイタジュバ(MG)のウェブデザイナー兼起業家です。 あいまいなトピックについて書くこと、およびいくつかクールなことをすることが大好きです。

接続します。