今回は最近よく見る、ダウンディレクションアローの実装をメモしていきます。
Contents
ダウンディレクションアローとは?
下にスクロールするように指示する矢印のことです。
何度か見かけたことがあるのではないでしょうか。
http://plokijuhygft.html.xdomain.jp/

特徴としては、下にスクロールすることを促しているため、ぴょこぴょこ動くことです。
ぴょこぴょこ動かす方法
トータルのコード
img {/*ダウンディレクションアローの画像*/ /*2sは2second。つまり2秒のこと。*/ animation: dda 2s infinite; } @keyframes dda { 0% {/*0秒時*/ transform: translate(0, 0); /*transform: translate(右,下);*/ } 20% {/*0.4秒時*/ transform: translate(0px, 10px); } 40% {/*0.8秒時*/ transform: translate(0, 0); } }
animation: dda 2s infinite;
ここのコードの意味は、
『「dda」というアニメーションを2秒かけて行うことを永遠と続く。』
意味です。
@keyframes dda {}
ここでアニメーションを作成しています。
@keyframes アニメーション名 {}で作成します。アニメーション名はなんでもおけです。
『dda』とは、DownDirectionArrowを縮めたものです。
%によってその時点の動きを決めています。
今回は、transform: transrate(右へ, 下へ);によって位置を決めています。
なんとなくオシャレな感じなのでいいですよ!
簡単に実装できるので、ぜひぜひお試しください!!
ABOUT ME