もっと見る
ソースコードダウンロード プログラミング関連 ウェブサイト作成リソース 書籍とチュートリアル モバイルゲーム モバイルソフトウェア 記事
ホーム>Web デザインのチュートリアル>WEB標準化

知っておきたいCSS3アニメーション技術(3)

著者：Eve Cole 更新時間：2009-12-31 15:36:22

遷移

CSS プロパティに関係する基本的な遷移は、要素を定義して、休止状態 (たとえば、濃い青色の背景) からホバーまたはアクティブな状態 (たとえば、明るい青色の背景) に移動することです。

トランスフォームは、トランスフォーム (:hover や :focus などのイベントの発生だけでなく) と一緒に使用して、アニメーションを作成することができます。背景色のフェード、要素のスライド、オブジェクトの回転はすべて CSS トランジションを使用して行われます。

引用した内容は以下の通りです。

#nav a{ 背景色:赤 }
#ナビ a:ホバー、#ナビ a:フォーカス{
背景色:青;
/* 変換に背景色プロパティに適用するように指示します (CSS パラメーターのように見えますね? #foreshadowing)*/
-webkit-transition-property:背景色;
/* 2 秒間続けます*/
-webkit-transition-duration:2s;
}

変換するいくつかのパラメータ

遷移プロパティ

たとえば、上記の例では、変換はbackground-colorプロパティに適用されます。

移行期間

変換にかかる時間 (古い属性から新しい属性に変更するのにかかる時間) を定義します。

遷移タイミング関数

過剰な効果として理解できます。変換時の中間値を指定します。 cubic-bezierで指定可能。もちろん、一般的に使用される組み込み値がいくつかあります。

遷移遅延

これをわかりやすくすると、変換遅延時間です。時間は、正の整数、負の整数、またはゼロにすることができます。ゼロ以外の場合、単位は s (秒) または ms (ミリ秒) に設定する必要があります。負の数の場合、変換されたアクションは次から表示されます。その時点で、前のアクションは切り捨てられます。
注: パラメータ部分は翻訳時に追加されたもので、原文にはありません。

ブラウザのサポート

変換属性と同様に優れていますが、現在は WebKit ブラウザでのみサポートされています。 -moz-transition は、Firefox 3.7 の最近の nightly-build バージョンですでに利用可能です。将来の機能強化のために、CSS に -moz-transition を追加することもできます。念のため、プライベート プレフィックスなしでプロパティを追加することもできます。

アニメーション

CSS 3 が最も役立つのはアニメーションです。上で説明したすべての要素を、animation-duration、animation-name、animation-timing-function などのアニメーション プロパティと組み合わせて、Flash アニメーションのような効果 (純粋な CSS) を作成できます。

ビデオアドレス: http://www.tudou.com/programs/view/YeTPctOy2mo

引用した内容は以下の通りです。

#回転{
マージン: 0 自動;
幅: 600ピクセル;
高さ: 400ピクセル;
/* ここが 3 次元空間であることを確認してください */
-webkit-transform-style: 保存 3d;
/*行全体で X 軸回転、7 秒間のアニメーション、無限再生、および直線性を使用するようにします*/
-webkit-アニメーション名: x-spin;
-webkit-animation-duration: 7 秒;
-webkit-animation-iteration-count: 無限;
-webkit-animation-timing-function: リニア;
}
/* 呼び出されるアニメーションを定義します*/
@-webkit-keyframes x-spin {
0% { -webkit-transform: 回転X(0度) }
50% { -webkit-transform: 回転X(180度) }
100% { -webkit-transform: 回転X(360度) }
}

この素晴らしい CSS アニメーション コードとオンライン デモは、 Webkit Web サイトでご覧いただけます。デモはどの Web サイトでも見ることができますが、アニメーション効果は Mac OS (Snow Leopard) 上のWebKit のナイトリー ビルド バージョンでのみ表示されます。上のビデオとまったく同じように見えます。mac os (snow leopard バージョン) を使用している場合は、Webkit をインストールしてその効果を自分の目で確認する価値があると思います (これは本当に素晴らしいです)。 Windows システム ユーザーは一時的にこの効果を認識できなくなります。

アニメーションの一部のパラメータ

アニメーションのパラメータは、translate のパラメータと似ているため、translate のパラメータを理解していれば、ここを理解するのは難しくありません。

アニメ名

アニメーションの名前。

アニメーション期間

アニメーションが 1 回再生されるのに必要な時間を定義します。デフォルトは 0 です。

アニメーションタイミング関数

アニメーションの再生方法を定義します。パラメータ設定は、transition-timing-function と似ています。

アニメーション遅延

アニメーションの開始時期を定義する

アニメーションの反復回数

ループの数を定義します。無限とは回数が無制限であることを意味します。デフォルトは 1 です。

-webkit-アニメーションの方向

アニメーションの再生方向。2 つの値。デフォルトは通常です。この時点では、アニメーションの各サイクルが順方向に再生されます。もう 1 つの値は交互です。その場合、偶数回は順方向に再生され、奇数回は逆方向に再生されます。
ブラウザのサポート

残念ながら、現在、CSS アニメーションをサポートしているブラウザはわずかです。 2D CSS アニメーションは、Safari 4 (Leopard)、Chrome 3、Safari Mobile、Shira、およびその他の Webkit ブラウザーで動作します。 Safari 4 (Snow Leopard) は 3D アニメーションをサポートします。