色面が左から伸びてから画像がスライドイン

• 村島国際法律事務所https://attorney-murashima.com/

画像表示の前に単色のマスクが走る動きは、読み込み時間を視覚的な演出（カーテン効果）に変換し、ユーザーの待機ストレスを軽減します。ブランドカラーを用いることで印象付けも可能です。実装は、擬似要素のscaleXを0→1→0（transform-originを左右切り替え）で動作させ、その隙に画像をスライドインさせます。タイミングがずれると背景が見えてしまうため、シークエンスの微調整が美しさを左右します。