CSS3 トランジションとトランスフォームを使用してアニメーションを作成する方法

変換と遷移を使用して、CSS3 で興味深いアニメーションを作成できます。 変換は、要素をある状態から別の状態に変更するために使用されます。 例としては、要素の回転、移動、傾斜、拡大縮小があります。 遷移がなければ、変換される要素は、ある状態から別の状態に突然変化します。 これを防ぐために、トランジションを追加して変更を制御し、見た目を滑らかにすることができます。

CSS3 トランスフォームの使用方法

一般的に使用される変換にはいくつかの種類があります。 このチュートリアルでは 2D の例に焦点を当てますが、3D 変換でもすばらしいことができることに注意してください。 (2D をマスターしたら、3D はずっと簡単になります!)

次の例では、元の長方形は濃い緑色で、変換後の長方形はもう少し透明になっています。

翻訳

translate()メソッドは、要素を現在の位置から新しい位置に移動します。
このコードでは、調整された四角形が現在の位置から右に 40 ピクセル、下に 100 ピクセル移動します。

 -ms-transform: translate(40px, 100px); /* IE 9 */ -webkit-transform: translate(40px, 100px); /* Safari */ transform: translate(40px, 100px);

回転する

rotate()メソッドは、指定された度数だけ要素を時計回りまたは反時計回りに回転させます。 このコードは、四角形を時計回りに 40 度回転します。

 -ms-transform: rotate(40deg); /* IE 9 */ -webkit-transform: rotate(40deg); /* Safari */ transform: rotate(40deg);

規模

scale()メソッドは、要素のサイズを増減します (幅と高さに指定されたパラメーターに従って)。 この例では、調整された四角形は元の幅の 2 倍、元の高さの 3 倍になっています。

 -ms-transform: scale(2, 3); /* IE 9 */ -webkit-transform: scale(2, 3); /* Safari */ transform: scale(2, 3);

SkewX

skewX()を使用すると、x 軸のみが影響を受けます。 この長方形は、x 軸に沿って 30 度傾いています。

 -ms-transform: skewX(30deg); /* IE 9 */ -webkit-transform: skewX(30deg); /* Safari */ transform: skewX(30deg);

SkewY

これは同じ考え方ですが、y 軸上にあります。 skewY()メソッドは、定義された角度で y 軸に沿って要素を傾斜させます。 この長方形は、y 軸に沿って 30 度傾いています。

 -ms-transform: skewY(30deg); /* IE 9 */ -webkit-transform: skewY(30deg); /* Safari */ transform: skewY(30deg); }

斜め

x 軸と y 軸の両方を傾ける場合は、1 か所で行うことができます。 skew()メソッドは、指定された角度を使用して、x 軸と y 軸に沿って要素を傾斜させます。 次の例では、四角形要素を x 軸に沿って 30 度、x 軸に沿って 20 度傾けます。

 -ms-transform: skew(30deg, 20deg); /* IE 9 */ -webkit-transform: skew(30deg, 20deg); /* Safari */ transform: skew(30deg, 20deg);

マトリックス

これは物事が面白くなる場所ですが、適切な状況ではより効率的でもあります. 多くの変換を行っていて、それらをすべて個別に書きたくない場合は、これらの 2D 変換をmatrix()メソッドと組み合わせることができます。

従うべき基本的な概要は次のとおりです。

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

マトリックスの値を見つけるには、ある程度の調査が必要です。 これは、始めるのに役立つガイドです。

この例を作成するために、行列の値は次のとおりです。

 -ms-transform: matrix(2, -0.3, 0, 1, 0, 0); /* IE 9 */ -webkit-transform: matrix(2, -0.3, 0, 1, 0, 0); /* Safari */ transform: matrix(2, -0.3, 0, 1, 0, 0);

CSS3 トランジションの使用方法

トランスフォームについて説明したので、トランジションで頻繁に使用されることに注意することが重要です。 これは、次の設計例でより明確になります。

値をカスタマイズして、要素の 2 つの状態間を好きなように遷移できることを覚えておくとよいでしょう。 CSS プロパティを変更するときにアニメーションの速度を制御する方法と考えてください。 おそらく出くわしたことがある 1 つの例は、ボタンの上にカーソルを置いた場合です。 カーソルを合わせるとすぐに暗い色になるのではなく、「ゆっくりと暗くなる」のが一般的です。 この「ゆっくりと暗くなる」は、トランジションで作成されました。

多くの値を指定している場合は、省略形が便利です。 CSS のtransitionプロパティは、 transition-property 、 transition-duration 、 transition-timing-function 、およびtransition-delayの短縮プロパティです。

移行の詳細

transition-property個々のプロパティにトランジションを適用できるため、トランジションが適用される CSS プロパティを指定します。 個々のプロパティにトランジションを適用する例としては、背景や変換があります。 サイトのすべてのプロパティをターゲットにする場合は、変換プロパティをallに設定できます。

transition-durationプロパティの変更がすぐにではなく、指定された時間にわたって行われるようにするのに役立ちます。 可能な値として秒とミリ秒が表示されます。

 transition-duration: 7s; transition-duration: 120ms; transition-duration: 2s, 3s; transition-duration: 10s, 30s, 230ms;

CSS のtransition-timing-functionプロパティを使用すると、加速曲線を確立できるため、遷移の速度をその持続時間で変化させることができます。 実験する多くのオプションがあります。

 transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;

transition-delay一目瞭然です。 指定された値は、トランジション効果が開始されるまで待機する秒数またはミリ秒数を設定します。 Initialプロパティをデフォルト値に設定します。 inheritが指定されている場合、これは親要素からプロパティを継承することを意味します。

 Here are all the properties: transition-property: background; //all transition-duration: 1s; transition-timing-function: linear; //other options are ease transition-delay: 0.5s;

トランジションの基本的な簡略設定は次のとおりです。

 div { transition: [property] [duration] [timing-function] [delay]; }

完全な略記シーケンス:

 div { transition: background 1s linear 0.5s; }

アニメーション企画

非常に詳細なアニメーションを作成する前に、完全にクレイジーなものを作成する前に一歩下がってください (特に、それが Web 上で公開される場合)。 楽しいセンスを追加することは何も悪いことではありませんが、過度にアニメーション化するのは魅力的です. 作成する動きは、意味を伝え、ユーザー エクスペリエンスを向上させる必要があります。 そうは言っても、作成する時が来ました！

このチュートリアルには、アニメーションを表示するためのアニメーション GIF があることを強調したいと思います。 GIF は繰り返し使用されますが、これは通常、デザインでは行われません。 それらを繰り返す目的は、デモンストレーションのみを目的としています。

CSS Transform プロパティを使用して画像を移動する

複雑な変換と遷移に入る前に、軸グリッド上の座標について話しましょう。 (注意: これにより、数学の授業で方眼紙の記憶がよみがえる場合があります。) 座標は、画像の移動に使用されます。

X 座標と Y 座標

物事は、あなたが期待するものとは少し異なって見えます。 -y 値は x 軸の上にあります。 HTML と CSS は、「逆デカルト座標系」と呼ばれるものを使用します。これは、Web ページが左上から始まり、下に向かって読むためです。

アニメーション 1: 水平移動による基本的な変換

translate() のベースと、要素を移動する方法について簡単に触れました。 実践すると、文字通りボートを浮かせることができます。 上で学んだように、 translate() メソッドは要素を現在の位置から移動します (x 軸と y 軸に指定されたパラメーターに従って)。

最初のプロジェクトは、潜水艦のグラフィックを動かすことです。 潜水艦は時々空中に現れる必要があるため、 translate()を使用して慎重にスタイルを設定します。

transform: translate(x,y)を使用して初期位置から移動するには、2 つの新しい値を指定する必要があります。 潜水艦を右と上に移動させるには、x の値を正にし、y の値を負にする必要があります。 y の値が 0 に設定されている場合、右にのみ移動し、上には移動しません。

transform() で空中に上がる潜水艦

この例では、オブジェクトを右に 200 ピクセル、上に 25 ピクセル移動します。 構文はtransform: translate(200px,-25px);です。 オブジェクトは.underwaterのホバーで移動します。 .underwater:hover .move-rightで動きのスタイルを作成することで、ホバー時にアクションが発生します。

開始 HTML は次のとおりです。

 <div class="underwater"> <div class="object submarine move-right"> <!-- image is set as a background image on submarine --> </div> </div>

Codepen でこれを参照してください。

この基本的なアニメーションを作成するのに、多くの CSS は必要ありません。

 .underwater { position: relative; min-height: 600px; background-color: #4fc3da; } .underwater:hover .move-right{ transform: translate( 200px ,-25px ); -webkit-transform: translate( 200px ,-25px ); /** Chrome & Safari **/ -ms-transform: translate( 200px ,-25px ); /** Firefox **/ } .submarine { height: 200px; background: url("little-submarine.svg") no-repeat; } .object { transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/ -ms-transition: all 2s ease-in-out; /** Opera **/ }

ご覧のとおり、座標は右上の四角形になります。 ホバリングすると、潜水艦は変換により新しい座標に移動します。

トランジションのおかげで物事はスムーズに見えます。 transition-duration 2secに設定されていますが、これはこのアニメーションには速すぎません。 transition-timing-function開始と終了を遅くするease-in-outに設定されました。 継続時間をもっと長くすると、これは非常に明白になります。

基本的なアニメーション 2: キーフレームとアニメーションによる水平移動

この例では、Transform の使用方法が少し異なります。 キーフレームとアニメーション プロパティを使用して、次のアニメーションを作成します。

キーフレームの基本

@keyframes内で、アニメーションのスタイルとステージを定義します。 ここで使用する例を次に示します。これは、「下に移動しながらフェードインする」効果を与えるのに役立ちます。

 @keyframes fadeInDown { 0% { opacity: .8; transform: translate(0, 0); } 100% { opacity: 1; transform: translate(0, 30px); } }

変換値はキーフレームに組み込まれます。 元の配置は 0% に設定され、100% では位置が 30px 下に移動します。

アニメーションの基本

CSS3 アニメーションを使用するには、アニメーションのキーフレームを指定します。

上で設計したように、 @keyframes要素が特定の時点で持つスタイルを保持します。

これを行うときはいつでも、アニメーションにわかりやすい名前を付けてください。 この場合、 fadeOut使用しています。 fadeOut含むすべてのクラスが適用されます。 アニメーションの段階では、「from」を 0%、「to」を 100% に設定します。 この例は 2 つのステージだけで非常に単純ですが、間にステップを追加することもできます。

アニメーション サブプロパティを使用した特定のアクション

animation プロパティは、CSS セレクタ内で@keyframes呼び出すために使用されます。 アニメーションは、複数のサブプロパティを持つことができます。

キーフレームは、アニメーションがどのように見えるかを定義します。 サブプロパティは、アニメーションの特定のルールを定義します。 アニメーション シーケンスがどのように進行するかのタイミング、期間、およびその他の重要な詳細は、すべてサブプロパティに含まれています。

アニメーション サブプロパティの例をいくつか示します。

• Animation-name: アニメーションのキーフレームを記述する@keyframesat-ruleの名前。 前の例のfadeOutという名前は、 animation-nameの例です。
• Animation-duration: アニメーションが 1 つの完全なサイクルを完了するのにかかる時間。
• Animation-timing-function: アニメーションのタイミング、具体的にはアニメーションがキーフレームをどのように遷移するか。 この機能には、加速曲線を確立する機能があります。 例としては、 linear 、 ease 、 ease-in 、 ease-out 、 ease-in-out 、 cubic-bezierあります。
• アニメーション遅延: 要素が読み込まれてからアニメーションが始まるまでの遅延。
• Animation-iteration-count: アニメーションを繰り返す回数。 アニメーションを永遠に続けたいですか？ アニメーションを無制限に繰り返すには、 infiniteを指定します。
• アニメーションの方向: これは、アニメーションがシーケンスを実行するたびに方向を変えるか、開始点にリセットして繰り返すかを決定します。
• Animation-fill-mode: アニメーションが実行される前と後の両方で適用される値。
• Animation-play-state: このオプションを使用すると、アニメーション シーケンスを一時停止および再開できます。 例としては、 none 、 forwards 、 backwards 、またはbothあります。

 .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; animation-iteration-count: 1; }

簡略化して書くと次のようになります。

 animation: 4s ease-in-out 1 paused fadeInDown;

HTML 構造は次のとおりです。

 <div class="underwater"> <div class="content-wrap fadeInDown"> <div class="submarine"></div> <h2>Cute Submarine</h2> <p>Text here.</p> </div> </div>

fadeInDownのクラスは、潜水艦とコンテンツを上下に動かしています。

キーフレームを調整してアニメーションを滑らかにする

さらにいくつかのキーフレームを使用すると、アニメーションをよりスムーズにすることができます。

 @keyframes fadeInDown { 0% { opacity: .8; transform: translateY(5px); } 25% { opacity: .9; transform: translateY(15px); } 50% { opacity: 1; transform: translateY(30px); } 75% { opacity: 1; transform: translateY(15px); } 100% { opacity: .9; transform: translateY(0); } }

Codepen でこれを参照してください。

アニメーションのタイミングを調整する

キーフレームを追加すると、アニメーションがスムーズになりますが、キーフレームを増やし、すべてのテキストを含む div にテキストの遅延を追加することで、もう少し対話性を高めることができます。 潜水艦がテキストから跳ね返るのは楽しい効果なので、潜水艦の動きに合わせて遅延を設定すると、それが可能になります。

HTML には有効なクラスが適用されます。

 <div class="underwater"> <div class="submarine move-down fadeInDown"> </div> <div class="moving-content move-down text-delay fadeInDownText"> <p>Text goes here.</p> </div> </div>

インタラクティブなアニメーションを可能にする更新された CSS は次のとおりです。

 @keyframes fadeInDown { 0% { opacity: .8; transform: translateY(0); } 25% { opacity: 1; transform: translateY(15px); } 50% { opacity: 1; transform: translateY(30px); } 75% { opacity: 1; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeInDownText { 0% { opacity: .8; transform: translateY(0); } 100% { opacity: 1; transform: translateY(35px); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } .fadeInDownText { -webkit-animation-name: fadeInDownText; animation-name: fadeInDownText; } .move-down{ -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1 } .text-delay { -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */ animation-delay: 2s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }

Codepen でこれを参照してください。

CSS3 アニメーションの 3 次ベジェ プログレス バー

進行状況バーを作成して、アニメーションの進行状況を祝う時が来ました!

これまで説明してきたすべての概念を組み合わせて、このようなものを作成します。 プログレス バーは非常に一般的な UI 要素であるため、このような機能を作成すると、他の Web 要素がどのようにアニメーション化されるかを確認するのに役立ちます。

開始 HTML は次のとおりです。

 <div class="container"> <div class="row"> <div class="masthead"> <p>CSS3 Loading Bar</p> </div> </div> <div class="fast-loader"></div> </div>

そして、それを実現するための CSS は次のとおりです。

 @keyframes speedSetting { 0% { width: 0px; } 100% { width: 100%; } } @keyframes progressMotion { 0% { opacity: 1; } 50% {opacity: 1; } 100% { opacity: 0; } } .fast-loader { width: 0px; height: 10px; background: linear-gradient(to left, blue,rgba(255,255,255,.0)); animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite; -webkit-animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite; }

キーフレームの最初のセットでは、幅が 2 秒間で 0 から 100% に変化します。 progressMotionのキーフレームは不透明度を制御しています。

CSS ベジェ曲線

cubic-bezier()関数をtransition-timing-functionプロパティと一緒に使用して、トランジションがその期間中にどのように速度を変化させるかを制御できます。 これはアニメーションで見ることができます。 開始が少し遅くなり、その後ペースが上がるのがわかりますか?

ベジエ ラッパーを正方形として描くと便利です。 左下と右上が要所であるP0とP3です。 これらは常に (0,0) と (1,1) に設定され、変更されません。 ただし、x または y の値で新しいポイントを指定すると、 cubic-bezier()関数で P1 と P2 を移動できます。

• x1 は制御点 p1 の x 座標です。
• y1 は制御点 p1 の y 座標です。
• x2 は制御点 p2 の x 座標です。
• y2 は制御点 p2 の y 座標です。

値の例を次に示します。

x1 = .7
y1 = .16
x2 = .2
y2 = .9

したがって、例は次のようになります。

 cubic-bezier(.7,.16,.2,.9)

プログレス バーは、ベジエがアニメーションのタイミングをカスタマイズする方法の良い例です。 変換、トランジション、およびその他の多くのオプションを使用して、カスタム アニメーションを簡単に作成できます。 これらの基本的な CSS3 アニメーションの例を見て、他にどのような可能性があるかを理解していただければ幸いです。