最近流行りのwebデザイン！ダウンディレクションアローの実装方法！

今回は最近よく見る、ダウンディレクションアローの実装をメモしていきます。

Udemyのオススメの講座

【iOS12対応】未経験者が有名アプリ開発者になるiOS 12の全て 20個以上アプリをつくりプロになる

ダウンディレクションアローとは？

下にスクロールするように指示する矢印のことです。

何度か見かけたことがあるのではないでしょうか。

http://plokijuhygft.html.xdomain.jp/

特徴としては、下にスクロールすることを促しているため、ぴょこぴょこ動くことです。

ぴょこぴょこ動かす方法

トータルのコード

animation: dda 2s infinite;

ここのコードの意味は、

『「dda」というアニメーションを２秒かけて行うことを永遠と続く。』

意味です。

@keyframes dda {}

ここでアニメーションを作成しています。

@keyframes アニメーション名 {}で作成します。アニメーション名はなんでもおけです。

『dda』とは、DownDirectionArrowを縮めたものです。

%によってその時点の動きを決めています。

今回は、transform: transrate(右へ, 　下へ);によって位置を決めています。

なんとなくオシャレな感じなのでいいですよ！

簡単に実装できるので、ぜひぜひお試しください！！