7個のプロパティ
要素の背後にあるコンテンツにフィルター効果を適用するプロパティです。ガラス効果やぼかし効果を作成できます。
.glass-effect {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
}要素に視覚効果（ぼかし、明度調整、色相変更など）を適用するプロパティです。blur()、brightness()、contrast()、grayscale()など多数の関数があり、画像加工やデザイン効果を実現します。
filter: blur(5px);要素の透明度を指定するプロパティです。0（完全透明）から1（完全不透明）の間で指定します。子要素も含めて透明度が適用されるため、背景だけを透明にしたい場合はRGBAを使用します。
opacity: 1;CSSプロパティの変化を滑らかにアニメーションするプロパティです。プロパティ名、持続時間、タイミング関数、遅延を指定でき、ユーザーインタラクションに対する自然な視覚フィードバックを提供します。
transition: all 0.3s ease;要素の変形（移動、回転、拡大縮小など）を指定するプロパティです。translate()、rotate()、scale()、skew()などの関数を使用し、3D変形も可能です。アニメーションやインタラクティブなデザインに不可欠です。
.hover-lift {
transform: translateY(-4px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}キーフレームアニメーションを制御するプロパティです。@keyframesで定義したアニメーション名、持続時間、タイミング関数、遅延、繰り返し回数、方向などを指定し、複雑なアニメーションを実現できます。
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 0.5s ease-in-out;
}アニメーションの各段階を定義するルールです。@keyframes名前 { from { } to { } }または0%から100%のパーセンテージでアニメーションの途中状態を細かく指定できます。複雑で滑らかなアニメーションを実現するための基礎です。
@keyframes slideIn {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}