Transition & Transform & Animation

Transition

Transitionプロパティは、CSSプロパティを変更するときにアニメーションの速度を調整する方法を提供します.
ショートカット属性を使用する場合は、持続時間を必須属性として使用する必要があります.

div{
	transition: <property> <duration> <timeing-function> <delay>
}

すべての項目が取引の対象にならない.(ex.displayはサポートされていません)

//Box model
	width height padding margin border

//Background
	background-color background-position

//text
	color font-size font-weight letter-spacing line-height text-indent text-shadow vertical-align word-spacing

// 기타
	opacity outline visibility z-index position(top left right bottom)

timing-functionease(デフォルト):ゆっくり開始し、速くなり、遅くなります.
リニア:一定の速度で行います.
ease-in:ゆっくり始めます.
ease-out:ゆっくり終わります.
ease-in-out:ゆっくりと始まりゆっくりと終わります

Transform

Transformアトリビュートは、要素の位置を回転、スケール、傾斜、または変更できます.

/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn); rotate3d(1, 2.0, 3.0, 10deg); rotateX(10deg); rotateY(10deg); rotateZ(10deg);
transform: translate(12px, 50%); translate3d(12px, 50%, 3em); translateX(2em); translateY(3in); translateZ(2px);
transform: scale(2, 0.5); scale3d(2.5, 1.2, 0.3); scaleX(2); scaleY(0.5); scaleZ(0.3);
transform: skew(30deg, 20deg); skewX(30deg); skewY(1.07rad);

matrix:translate(이동)、skew(기울기)、rotate(회전)、scal(확대)は行列を表す.

perspective:ユーザと平面との距離を設定します.(パース)
基点を指定するには、perspective-originとともに使用します.
一番前に書いてください.

Animation

animation: name duration timing-function delay iteration-count direction fill-mode play-state

animation-name:@keyframesルールの名前を指定します.
(数値または特殊文字で始まることはできません.)

animation-duration:アニメーションの継続時間を設定

timing-function:中間状態の切替時間間隔を設定します.

delay:ヒステリシス時間の設定

iteration-count:アニメーションの繰り返しを設定

direction:繰り返し方向を設定します.

normal:順方向

reverse:逆

alternate:逆往復

alternate-reverse:逆往復

play-state:アニメーションの再生/停止を設定

fill-mode:アニメーションの開始前または終了後に適用される値を指定します.

none:既存位置の開始->アニメーション開始位置->アクション->既存位置の終了

forwards:既存位置から開始->アニメーション開始->アクション->アニメーション終了位置から終了

後退:アニメーション開始位置->アクション->既存位置から終了

デュアル:アニメーション開始位置->アクション->アニメーション終了位置