Shine
シャイン（光沢）
PREMIUM
どんな動き？
カードやボタンにカーソルを乗せた瞬間、斜め方向の光沢（ハイライト）が要素の上を一瞬で通り抜けるアニメーション。金属や高級感のある質感を演出できるため、プレミアム感を出したいプロダクトカードやバッジ、CTAボタンのアクセントとして使われる。
よく使う場所
プレミアムカードバッジCTAボタン
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Sweep a diagonal light gradient across the element once when the cursor enters.Trigger:
Mouse enters the element (hover).
Initial state:
Highlight gradient positioned off-canvas (e.g. left: -150%)
Animation:
A diagonal light gradient sweeps across the element from one side to the other in a single pass.
Final state:
Highlight exits at the opposite side (e.g. left: 150%) and resets for the next hover.
Timing:
duration: 0.9s, easing: ease.実装方法の候補
この動きは以下の技術で実装できます。
CSS :hover + gradient + transformCSS mask
別名・関連ワード
Shine SweepHover GlareLight Sweep Effect