More than 3 years have passed since last update.

Transition

Posted at 2021-03-10

slide animation

transition + transform + z-index + overflow

transitionプロパティを使って、移り変わりの緩急を定義できる

translateは物体の位置を移動する関数
transform: translate（50px, 70%）
transform: translateX（100%）
transform: translateY（100%）

X＝縦　Y＝横

rotateは物体を回転させる関数
transform: rotate(30deg);

transform-originは支点を指定する関数
transform-origin: center, center;

skewは平行四辺形を定義する関数
transform: skew(30deg);

scaleは物体のサイズを引数倍にする関数
transform: scale(1.1, 1.2);

z-indexは前面に出る方を指定できるプロパティ（positionがstatic以外のとき）
A（z-index: 20;）B（ z-index: 10;）の場合、Aが前面に来る

fixedはwindowの指定の位置に固定する
position: fixed;

stickyは親要素の範囲内で位置を固定できる
position: sticky;

overflow: visible; 表示
overflow: hidden;　非表示

擬似要素
beforeは要素の一番先頭、afterは要素の一番最後に付与される
content ''が必須