伸び縮みする矢印のアニメーションサンプル【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のライブラリ本体の読み込みを忘れずに。