伸び縮みする矢印のアニメーションサンプル【CSSのみや、スクロールで発火】

コーディング

HTMLとCSSのみで描画する、動く矢印のアニメーションサンプルです。随時追加予定。

スクロールして要素が出現してからアニメーションを開始させたいときは、jQueryも追加します(後半に記載)。

棒線のみのスタイリッシュな矢印(文字つき)

See the Pen
animated arrow 01
by FUMI (@designbird)
on CodePen.

※待機時間も含めた5秒のアニメーションにしているので、用途に合わせて調整してください。

スクロールして見えてから、下に伸びる矢印【jQuery】

See the Pen
animated arrow 02
by FUMI (@designbird)
on CodePen.

スクロールして要素が見えたら、クラス名「active」をつけてアニメーションスタート。
発火にjQueryを利用しているので、上記ソースコードに加え、jQueryのライブラリ本体の読み込みを忘れずに。