CSS3アニメーション - ベジェ曲線を使用したバウンス効果によるファンアウトの作成

知ってた 幾何学的変換 HTML要素に追加する 変形するスケール、スキュー、回転などのCSSプロパティはアニメーション化できます? それらを使用してアニメ化することができます 遷移 財産と @keyframes アニメーションですが、もっとクールなのは、アニメーション変換を少し追加するだけで一目瞭然になることです。 バウンス効果, を使用して 立方ベジエ（） タイミング機能.

手短に, 立方ベジエ（） （CSSでは）は 遷移のためのタイミング関数. それは遷移のスピードを指定し、そしてとりわけ、それはまた、 アニメーションに跳ね返り効果を作成する.

この記事では、まず始めに 単純な変換アニメーションを作成する 我々は後でそれ 追加する 立方ベジエ（） タイミング機能. このチュートリアルの最後で、あなたはアニメーションを作成する方法を理解するでしょう。 ファンアウトとバウンス効果の両方. これが最終結果です（効果を見るためにクリック）.

デモはChristopher Jonesによって撮影されたアニメーションの位置マーカーについての美しいDribbbleにインスパイアされました.

1.葉をつくる

位置マーカーの形状は、5つの葉（それらを呼び出しましょう）で構成されています。を作成する 楕円形 葉っぱの ボーダー半径 CSSプロパティの ボーダー半径 一角の 2つの半径で構成されている, 下に示すように、水平方向と垂直方向.

の ボーダー半径 propertyにはさまざまな構文があります。マーカーの形状にはもっと複雑なものを使います。

 border-radius：htl htr hbr hbl / vtl vtr vbr vbl; 

この構文では、水平半径と垂直半径が一緒にグループ化されています。 時間 ＆ v 水平半径と垂直半径を表す トン, l, b ＆ r 上下左右の角を表します。例えば, vbl 左下隅の垂直半径を表します.

あなたが与えるなら 1つだけの値 水平または垂直のいずれかの側では、その値はブラウザによって他のすべての水平または垂直半径にコピーされます。.

に 垂直楕円形を作成する, 水平半径を 50％ すべてのコーナーで、垂直方向のコーナーを調整して、目的の形状になるようにします。の 水平面 値を1つだけ使用します。 50％.

の 垂直半径 左上と右上の角の 30％, 左下隅と右下隅には 70％ 値.

HTML

CSS

.pinStarLeaf 幅：60ピクセル。高さ：120ピクセル。ボーダー半径：50％/ 30％30％70％70％。背景色：＃B8F0F5。 

葉を増やす

マーカーが5枚の葉を見せて広がるので、 葉のもう4つのコピー 異なる色で、そして互いの上にそれらを積み重ねるために絶対配置で.

HTML

CSS

#pinStarWrapper 幅：300px;高さ：300ピクセル。位置：相対; .pinStarLeaf 幅：60ピクセル。高さ：120ピクセル。位置：絶対ボーダー半径：50％/ 30％30％70％70％。左：0;右：0;トップ：0。下：0;マージン：自動。不透明度：０．５。 .pinStarLeaf：タイプのn（1）背景色：＃B8F0F5; .pinStarLeaf：タイプのn（2）背景色：＃9CF3DC; .pinStarLeaf：タイプのn（3）背景色：＃94F3B0; .pinStarLeaf：タイプのn（4）背景色：＃D2F8A1; .pinStarLeaf：タイプのn（5）背景色：＃F3EDA2;  

3.クリックイベントのキャプチャと美学の向上

しましょう チェックボックスを追加 とともに #pinStarCenterChkBox クリックイベントをキャプチャするための識別子。チェックボックスがチェックされると、葉は扇形に広がる（回転する）。また、追加する必要があります 白丸 とともに #pinStarCenter 美学のための識別子。これはマーカーの上に配置され、位置マーカーの中央部分になります.

HTML

チェックボックスを葉の前に、白い円を葉の後に配置します。

CSS

まず、チェックボックスとカバーサークルの基本スタイルを設定します。

 #pinStarCenter、＃pinStarCenterChkBox width：45px;高さ：50ピクセル。位置：絶対左：0;右：0;上：-60ピクセル下：0;マージン：自動。背景色：#fff;ボーダー半径：50％。カーソル：ポインタ。 #pinStarCenter、。pinStarLeaf ポインタイベント：なし。 #pinStarCenter> input [type = "checkbox"] width：100％;身長：100％。カーソル：ポインタ。  

各葉がz軸に沿って回転するので 異なる角度で, 設定する必要があります rotatez（）;を変換します。 それに応じて 星型を作成する. 私達はまた適用します 遷移 財産 回転効果のため （より正確には 遷移：1s線形変換 葉のためのルール）.

 #pinStarCenterChkBox：checked〜.pinStarLeaf transition：transform 1s linear; #pinStarCenterChkBox：チェック〜.pinStarLeaf：nth-​​of-type（5）transform：rotatez（35deg）; #pinStarCenterChkBox：チェック〜.pinStarLeaf：nth-​​of-type（4）transform：rotatez（105deg）; #pinStarCenterChkBox：チェック〜.pinStarLeaf：nth-​​of-type（3）transform：rotatez（180deg）; #pinStarCenterChkBox：チェック〜.pinStarLeaf：nth-​​of-type（2）transform：rotatez（255deg）; #pinStarCenterChkBox：チェック〜.pinStarLeaf：nth-​​of-type（1）transform：rotatez（325deg）;  

あなたが上記のCSSを見ているなら、あなたはあなたの存在から見ることができます #pinStarCenterChkBox：チェック〜 追加する一般的な兄弟セレクター 遷移 そして 変形する プロパティ チェックボックスがチェックされているとき （ユーザーがマーカーをクリックしたとき）.

4.回転の中心を修正する

デフォルトでは、回転の中心は配置されています 回転した要素の中心に, 私たちの場合は、葉の中心です。変換の中心を葉の内側の端に移動する必要があります。これを使用してこれを行うことができます 変換元 CSSプロパティ 変換された要素の位置を変更します.

回転効果を正しく機能させるために、次の2つの規則を .pinStarLeaf CSSファイル内のセレクタ

 .pinStarLeaf 変換元：30px 30px;遷移：１を線形に変換する。  

この時点では、まだバウンス効果は発生していません。マーカーの上にある白い円をクリックします.

ubic-Bezier（）のしくみを理解する

さて、バウンス効果を追加するには、 リニア タイミング機能 立方ベジエ（） の中に 遷移 CSSファイルでの宣言.

しかし、最初に、理解しましょう の背後にあるロジック 立方ベジエ（） タイミング機能 バウンス効果を簡単に理解できるように.

の構文 立方ベジエ（） 機能は以下の通りです, 日 そして トン あります 距離 そして 時間, そしてそれらの値は通常0から1の範囲です。

立方ベジエ（t 1、d 1、t 2、d 2）

CSSを説明しているにもかかわらず 立方ベジエ（） 距離と時間の点で正確ではない、それはこのようにそれを理解する方がはるかに簡単です.

あると仮定 点AからBへ移動する箱 6秒で。以下を使ってみましょう 立方ベジエ（） との移行のためのタイミング関数 t1 = 0 そして d1 = 1 値.

 / * t1 = 0、d1 = 1、t2 = 0、d2 = 0 * /立方ベジェ（0,1,0,0） 

ほとんどすぐに、箱はAから中点に移動し、残りの時間はBに達します。.

同じ遷移を値で試してみましょう t1 = 1 そして d1 = 0.

 / * t1 = 1、d1 = 0、t2 = 0、d2 = 0 * /立方ベジェ（1,0,0,0） 

最初の3秒間は、箱はそれほど動かず、後にほぼ中点にジャンプして、Bに向かって着実に動き始めます。.

ご覧のように, d1 を制御します A間の距離 ＆ 中点, そして t1 の Aから中点に達するのにかかる時間.

使ってみよう d2 そして t2 今すぐ両方 t1 そして d1 1になります t2 = 1 そして d2 = 0.

 / * t1 = 1、d1 = 1、t2 = 0、d2 = 1 * /立方ベジェ（1,1,0,1） 

箱は3秒でほぼ中途半端に移動します。 t1 = 1, d1 = 1そして、すぐにそれはポイントBにジャンプします.

最後の例は、の前の値を交換します。 t2 そして d2：

 / * t1 = 1、d1 = 1、t2 = 1、d2 = 0 * /立方ベジェ（1,1,1,0） 

箱は3秒でほぼ中途半端に移動します。 t1 = 1, d1 = 1その後、さらに3秒間はB点にジャンプする前にあまり動かない.

これらの例は、 d2 そして t2 ボックスにかかる距離と時間を制御する 中点から点Bに進む.

あなたはおそらくこの長い（まだまばらな）説明を必要としていませんでしたが 立方ベジエ（） この時点で、私はそれがあなたがこの機能をよりよく理解するのを助けるだろうと思います。さて、このすべてでバウンスはどこにくるのでしょうか。?

5. Cubic-Bezier（）によるバウンス効果の追加

の 主なパラメータ バウンス効果のための距離は, d1 そして d2. A d1 の値 1未満 箱を取る 点Aの後ろ アニメーション開始時にBに進む前.

A d2 の値 1以上 箱を取る B点を超えて アニメーションの終わりにBで休む前にしたがって、前後のバウンス効果.

私は今追加します 立方ベジエ（） 前者の代わりに私たちのデモに直接値 リニア の値 遷移 プロパティ、そしてあなたは結果を見ることができます.

 #pinStarCenterChkBox：チェックされた〜.pinStarLeaf 遷移：1の立方ベジェを変換する（.8、 - 。5、.2,1.4）;  

これが最終結果、バウンス効果を持つCSSのみのファンアウトアニメーションです。

比較とバウンス効果の理解を深めるために、 立方ベジエ（） アニメーションの値は、サンプルボックスに適用されたときに動作します。