Transition-delayプロパティはいいぞ〜

transition-delayというプロパティがある。

CSS の transition-delay プロパティは、値が変更されたときにプロパティのトランジション効果が始まるまでの待ち時間を指定します。

https://developer.mozilla.org/ja/docs/Web/CSS/transition-delay

例えばwidthを25%としていた要素がレスポンシブのブレークポイントを経て、width50%に変わったりすると、以下画像のように遅れてアニメーションさせたりできる。

この使い方はdevツールを使わない限りはあまり効果を得ないし実用的かと問われれば少し疑問が残るものの……最近とあるサイトを見ている時にたまたま見つけてテンションが上がった。

下のPenのCSS35行目からがその記述。気になる人はどうぞ。

See the Pen Delay-animation by Takasaki (@tkskds) on CodePen.

コメントを残す

メールアドレスが公開されることはありません。