• 操作
  • エリアホバー

#area hover 010

ホバーで背景画像が出現してじわじわ拡大

参考サイトURL
動きの解説

ホバーによって隠れていた背景画が現れ、さらにゆっくりと拡大し続ける動きは、ドラマチックな展開を予感させます。ただ表示するだけでなく「動き続ける」ことで、ユーザーの視線を釘付けにし、滞在時間を延ばす効果も期待できます。transitionで出現させつつ、animationで拡大を続ける複合指定が必要です。拡大しきった後にプツッと動きが止まると没入感が削がれるため、非常にゆっくりとした速度で長時間動かすか、往復する動き（alternate）を取り入れる工夫が有効です。