CSS Transition（アニメーション） ジェネレーター

各CSSプロパティの説明

transition

transitionプロパティは、CSSで指定できるアニメーションの1つです。ある2点間（始点と終点）の間をアニメーションさせることができます。自動再生やループの機能はありません。

transitionは以下の指定をおこなうことができます。

• transition-property：transitionを適用するプロパティの指定。初期値はallで全てのプロパティ
• transition-duration：アニメーションが始まってから終わるまでの時間。初期値は0s
• transition-timing-function：transitionの速度変化。初期値はeaseで、最初と最後が少しゆっくり。
• transition-delay：アニメーションし始める前の時間。初期値は0s

また、ショートハンドプロパティとしてtransitionを指定することができ以下のように記述することが可能です。
記述例）transition: 1s ease-out transform .2s
基本的に順不同ですが、時間の指定を2つ書いた場合（記述例で言うと1sと.2s）先に書いたほうがtransition-duration、2つ目に書いたほうがtransition-delayとなります。

transitionの発火（アニメーションし始めるタイミング）はhover擬似クラスや、JSなどによるクラスの付け替えなどがよく使われます。

transform

transformプロパティは要素を変形させることができます。
transformには大きく分けて次の4つの値が存在し、指定することができます。

• translate（移動）
• rotate（回転）
• scale（伸縮）
• skew（傾斜）

個々に指定することも可能ですが、組み合わせて指定する場合は、スペースで区切ります。
記述例） transform: scale(1.1) skew(10deg);
初期値はnoneです。
複数指定する場合は、記述した順番で要素に適用されます。

skew以外の値は、X, Y, Z軸方向（3D）の指定が可能です。skewはX, Y軸方向のみです。
例えばtranslateのX軸のみ指定する場合は、以下のように指定することができます。
記述例） transform: translateX(10px);

各指定は以下のようにも指定することができます。
translateの指定

• translate(X軸方向の移動距離, Y軸方向の移動距離)
• translateX(X軸方向の移動距離)
• translateY(Y軸方向の移動距離)
• translateZ(Z軸方向の移動距離)
• translate3d(X軸方向の移動距離, Y軸方向の移動距離, Z軸方向の移動距離)

scaleの指定

• scale(X軸方向の縮尺比率, Y軸方向の縮尺比率)
• scaleX(X軸方向の縮尺比率)
• scaleY(Y軸方向の縮尺比率)
• scaleZ(Z軸方向の縮尺比率)
• scale3d(X軸方向の縮尺比率, Y軸方向の縮尺比率, Z軸方向の縮尺比率)

rotateの指定

• rotate(回転角度)
• rotate3d(X軸を軸とする回転角度, Y軸を軸とする回転角度, Z軸を軸とする回転角度, 回転角度)
• rotateX(X軸を軸とする回転角度)
• rotateY(Y軸を軸とする回転角度)
• rotateZ(Z軸を軸とする回転角度)

skewの指定

• skew(X軸の傾斜角度, Y軸の傾斜角度)
• skewX(X軸の傾斜角度)
• skewY(Y軸の傾斜角度)

transformについて、さらに詳しく知りたい方はこちらの解説動画を参照してください。

transform3d

CSSで3Dの表現をする際には、transformプロパティの「translate」「rotate」「scale」を使うことで実現ができます。

特に「translateZ」「rotateX」「rotateY」「scaleZ」を指定することで3D方向の表現をおこなうことができます。
記述例） transform: rotateX(10deg) rotateY(35deg);

ただし、transformプロパティを用いるだけだと2Dの3Dの表現として感じることができないので、
transformを指定した親要素に「transform-style: preserve-3d;」という形で指定する必要があります。（初期値はflat）

さらに、「perspective」を指定することで、パースを指定することができ、遠近効果を設定することができます。
記述例） perspective: 1000px;

「perspective-origin」を指定することで、消失点を変更することもできます。初期値は50% 50%（それぞれXとY軸）です。
記述例） perspective-origin: 60% 80%;

border

borderプロパティは要素に枠線（要素の境界）を設定することができます。

各値（value）は、次のように指定することができます。
border: 枠線の幅枠線の種類枠線の色
記述例） border: 1px solid #333
ちなみに、値の順序は関係ありません。
borderの初期値はnoneです。

それぞれの値を個別に指定することもでき、

• border-width（枠線の幅）
• border-style（枠線の種類）
• border-color（枠線の色）

のプロパティがあります。
記述例） border-width: 10px;
記述例） border-style: solid;

これらは、それぞれ方向を指定することも出来ます。
border-widthの例

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

border-styleの例

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

border-colorの例

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

border-styleにはsolid（実線）以外にも以下のような値を指定することができます。

• double。２本の直線（二重線）を表示し、幅の合計はborder-widthで指定したpxサイズです。
• groove。立体的に窪んだ線で表示されます。ridgeの逆です。
• ridge。立体的に隆起した線で表示されます。grooveの逆です。
• inset。上と左の線が暗く、下と右の線が明るく表示され、全体が立体的に窪んだように表示されます。一部だけに指定しても立体感は出ません。outsetの逆です。
• outset。上と左の線が明るく、下と右の線が暗く表示され、立体的に隆起したように表示されます。一部だけに指定しても立体感は出ません。insetの逆です。
• dashed。破線で表示されます。短く角が四角い連続したダッシュや線分を表示します。
• dotted。点線で表示されます。具体的には連続した丸い点を表示します。点の半径は、同じ辺のborder-widthの計算値の半分です。

ただし、dottedやdashedなどはブラウザによって描画のされ方が違うことがありますので、ご注意ください。

枠線を指定する方向を定義することもできます。

• border-top
• border-bottom
• border-right
• border-left

記述例） border-left: 10px solid #333;

box-shadow

box-shadowプロパティは要素に影を設定することができます。

各値（value）は、次のように指定することができます
box-shadow: 影を内側に付ける（inset）水平方向のずらし量垂直方向のずらし量影のぼかし量影の大きさ影の色

• 水平方向のずらし量垂直方向のずらし量の値はマイナスの値を指定すると、それぞれ垂直方向の上と、水平方向の左に配置されます。
• 影の大きさはプラスの値を指定すると大きくなっていきますが、マイナスの値を指定すると小さくなっていきます。

記述例） box-shadow: inset 2px 2px 3px 4px #000;

insetの指定が不要な場合は、記述も不要です。

• 値を2つだけ指定した場合は、水平方向のずらし量垂直方向のずらし量として設定されます。
• 値を3つだけ指定した場合は、さらに3つ目の値が影のぼかし量として設定されます。
• また値を4つだけ指定した場合は、さらに4つ目の値が影の大きさとして設定されます。

水平方向のずらし量垂直方向のずらし量影のぼかし量影の大きさについてはそれぞれ初期値が０です。
影の色は初期値がcurrentColor（colorに設定されている値）となります。

border-radius が指定された場合は、影もその丸みを反映します。

影は複数指定することができます。
複数指定したい際は、カンマ「，」で区切って指定します。最初に指定された影が最も手前に来ます。
記述例） box-shadow: inset 2px 2px 3px 4px rgba(0, 0, 0, .5), 0px 0px 3px #ff0;

テキストに影をつける場合は、text-shadowを使用します。

text-shadow

text-shadowプロパティは文字（テキスト）に影を設定することができます。

各値（value）は、次のように指定することができます。
text-shadow: 水平方向のずらし量垂直方向のずらし量影のぼかし量影の色

記述例） text-shadow: 2px 2px 3px rgba(0, 0, 0, .5)

水平方向のずらし量垂直方向のずらし量の値はマイナスの値を指定すると、それぞれ垂直方向の上と、水平方向の左に配置されます。
水平方向のずらし量垂直方向のずらし量影のぼかし量についてはそれぞれ初期値が０です。
影の色は指定されなければ、ユーザーエージェントが選択した色が使われます。その為、クロスブラウザ対応を考慮した場合、明示的に定義する必要があります。

影は複数指定することができます。
複数指定したい際は、カンマ「，」で区切って指定します。最初に指定された影が最も手前に来ます。
記述例） text-shadow: 2px 2px 3px rgba(0, 0, 0, .5), 0px 0px 3px #ff0;

hover

hoverは、ユーザーがカーソル（マウスポインタ―）で要素の上をホバー（通過）させた際の挙動を指定することができます。
記述例）
.test:hover {
color: red;
}

アニメーションさせたい場合、transitionプロパティをアニメーション前のセレクタに指定することで、hover時とhoverを解除した際にアニメーションを発生させることができます。
記述例）
.test {
transition: .3s;
}
.test:hover {
color: red;
}

スマートフォンなどのデバイスでは、タップした瞬間にhoverが発火する形になり、バグが発生しているようにも見えるので、注意が必要です。
メディアクエリやユーザーエージェントを活用することを検討されることが多いです。

hoverについて、さらに詳しく知りたい方はこちらの解説動画を参照してください。

filter

filterは、画像や要素にエフェクト（グラフィック効果）を適用することができます。値として次のようなものを指定できます。

• blur（ぼかし）
• brightness（明るさ）
• contrast（コントラスト）
• grayscale（グレースケール）
• hue-rotate（色相回転）
• invert（反転）
• opacity（透過度）
• saturate（彩度）
• sepia（セピア）
• drop-shadow（ドロップシャドウ）

SVGのfilter要素へのURLでSVGのフィルターを参照させることも出来ます。

複数指定することもでき、複数指定する場合は半角スペースで区切ります。
複数の指定をする場合は、指定した順番でfilterが適用されます。
記述例） filter: blur(3px) saturate(120%);
初期値はnoneです。
同じものを二重で適用することも出来ます。例えば、filter: blur(3px) blur(5px)のような形です。
また、hoverなどと組み合わせることにより、CSSでアニメーションをさせることもできます。

各項目の詳細は以下です。

• blur：要素をぼかします。単位に%は使用できません。値にはガウシアンぼかし (ガウスぼかし、ガウシアンブラー、ガウシアンフィルター、ガウスフィルター、Gaussian Blur）が使われます。指定した値は画面上のいくつのピクセルが互いに溶け込むかを定義します。
• brightness：要素の明るさを調整します。明るくしたり、暗くすることができます。100%（もしくは1）の値を指定すると、入力は変更されません。0%を指定すると、完全な黒の画像にすることができます。100%を超える値を指定することもできます。
• contrast：要素のコントラストを調整します。0%を指定すると完全にグレーの要素が作成されます。100%を指定すると、変化がありません。100%を超える値を指定すると、よりコントラスト比の高い表示になります。
• grayscale：要素をグレースケール（モノクロ）にします。100%を指定すると完全にグレースケールになります。0%では変化がありません。
• hue-rotate：要素の色相を回転します。0degでは変化がありません。360degを超える値は、回り込みになります（420degの場合、60degとなる）。
  ※色相とは赤・オレンジ・黄・緑・青・水色・紫のように、色を特徴づける色みのことで、色の三属性（色相・明度・彩度）の一つです。
• invert：要素の色を反転させます。0%では変化がありません。100%で完全に反転されます。
• opacity：要素の透過度を指定します。0%の値を指定すると、完全に透明になります。100%では変化がありません。CSSのopacityプロパティと結果は同じですが、一部のブラウザーでは性能を向上させるためにハードウェアアクセラレーションを提供する点が異なります。
• saturate：要素の彩度を変化させます。100%では変化がありません。0%に近づくほど彩度が下がり、100%を超える値では彩度が上がります。0%の値を指定すると、無彩色になります。
• sepia：要素をセピア調にします。0%では変化がありません。100%を指定すると完全にセピア調になります。
• drop-shadow：要素に影を指定します。box-shadowと似ていますが、insetが指定できません。それから、要素のフォルムに沿った影を生成します。背景が透過されたPNG画像には、透過されていない部分に沿った影を生成します。影は複数指定することも可能です。具体的には入力画像のアルファマスクを特定の色で、ずらしてぼかして描画したものを画像の下に合成したものです。一部のブラウザーでは性能を改善するためにハードウェアアクセラレーションで表示されます。
  全部で4つの値を指定することができ、drop-shadow(水平方向のずらし量垂直方向のずらし量影のぼかし量影の色) のように指定することができます。
  記述例）filter: drop-shadow(5px 4px 3px #555);

position

positionプロパティは要素がどのように配置されるかを設定します。
static（初期値）以外の値が指定されている場合に top, right, bottom, leftの各プロパティが、配置された要素の位置を決めます。
また、static以外の値が指定されているように関しては、z-index（重なり順）を指定することができます。z-indexの初期値はautoです。数値を指定することができ、数値が大きいほど要素は上のレイヤー（手前のレイヤー）として表示されます。

positionプロパティは次の値を設定することができます。

• relative：指定してもその要素自体の位置は変わりませんが、static（初期値）と違い、topなどの指定がされていた場合にその影響を受けます。
• absolute：祖先要素にstatic以外の指定がされていた場合、指定されている一番近い祖先要素を基準に配置します。
• fixed：画面を基準に相対的に要素を配置します。
  スクロールしても位置が変わりません。
• sticky：fixedと同じようにスクロールしても位置を固定しますが、親要素の範囲から出ることはできません。

記述例） position: relative;

positionについて、さらに詳しく知りたい方はこちらの解説動画を参照してください。