プロパティの種類

1.opacity（不透明度）： opacityプロパティは、要素の不透明度を設定するために使用されます。値は0から1の範囲で指定され、0は完全に透明であり、初期値は1となります。このプロパティは、要素のテキストや背景、境界線などのすべての要素に適用されます。

例：

div {
opacity: 0.5;
}

上記の例では、div要素の不透明度が0.5に設定されています。

2.transition（状態移動）： transition（トランジション）は、ある状態や状況から別の状態や状況へ移り変わることを指します。例えば、時間の経過によって季節が変わることや、人が学生から社会人へと進学することなどがtransitionの例です。要素の状態が変化する際に、滑らかなアニメーション効果を追加するためのプロパティです。要素のスタイルが変更された際に、指定した時間内で変化が起こるように設定することができます。例えば、マウスオーバー時に背景色が変化するような効果を作ることができます。

3.transform(初期値):要素の初期値を設定します。要素の位置や形状、サイズ、回転などを変更するためのプロパティです。transformプロパティには、さまざまな関数があり、これらを組み合わせることで要素を変形させることができます。

例えば、translate関数は、要素を指定した距離だけ水平方向や垂直方向に移動させることができます。この関数には、translateX、translateY、translateZなどのバリエーションもあります。

scale関数は、要素のサイズを指定した倍率で拡大または縮小することができます。この関数には、scaleX、scaleY、scaleZなどのバリエーションもあります。

rotate関数は、要素を指定した角度だけ回転させることができます。この関数には、rotateX、rotateY、rotateZなどのバリエーションもあります。

skew関数は、要素を指定した角度だけ傾けることができます。この関数には、skewX、skewYなどのバリエーションもあります。

CSSアニメーションの実装例

以下は上記のプロパティを使用した例です。

リプレイ

初期値としてopacityを0と設定し、要素を透明にします。さらに、transformのtranslateYで要素を10px下に配置します。そして、Javascriptのスクロールイベントでイベントを発火し、transformを解除する流れになります。スクロールと紐付ける方法は様々な方法がありますが、JavaScriptのアニメーションライブラリーGsapをおすすめいたします。GsapのscrollTriggerを使用する方法については、こちらを参照してください。