※当サイトにはプロモーションが含まれています。
最近はあまり見ませんが、CTA（Call To Action）のボタンの上に動きのある矢印のアニメーションが使われていることがあります。
例えば、下記のような矢印アニメーションです。
今回は、このような矢印の画像をバウンドさせるCSSを作成してみました。
にゃのらいと 動きのある矢印はリクエストが多いこともあって、関連記事もあるにゃ。
photoshopを使って３分で作れる矢印のGIFアニメーション
にゃテック 上記の矢印の画像は、このページ下にあるリンクからダウンロードすることもできるにゃ。
矢印の画像をバウンドさせるCSS
矢印の画像をバウンドさせるCSSです。
HTML
<img src="（画像のURL）" alt="矢印" class="nya-bounce-arrow">（画像のURL）の箇所に、イメージ画像のURLを記載します。
CSS
.nya-bounce-arrow {
width: 180px;
height: auto;
animation: nya-bounce 2s infinite;
}
@keyframes nya-bounce {
0% { transform: translateY(0); }
10% { transform: translateY(-20px); }
20% { transform: translateY(0); }
30% { transform: translateY(-15px); }
40% { transform: translateY(0); }
60% { transform: translateY(-10px); }
80% { transform: translateY(0); }
100% { transform: translateY(0); }
}矢印の画像を大きくしたい場合は、width: 180px;の値を変更します。
例えば、画像の幅を300pxにしたい場合は、下記のように記載します。
width: 300px;
なお、高さの設定は、autoにしてあるので、横幅を設定すれば自動的に高さは決まります。
アニメーションの動きは、@keyframes nya-bounceでおこなっています。
マイナスの値（-**px）が入っている箇所で、矢印を上側に動かして、0で元の位置に戻しています。
これらの設定は最適解がないので、ご自身で色々と数値をいじってみてください。
動作確認用に、HTMLとCSSをまとめたコードものせておきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>矢印のバウンスアニメーション</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
}
.nya-bounce-arrow {
width: 180px;
height: auto;
animation: nya-bounce 2s infinite;
}
@keyframes nya-bounce {
0% { transform: translateY(0); }
10% { transform: translateY(-20px); }
20% { transform: translateY(0); }
30% { transform: translateY(-15px); }
40% { transform: translateY(0); }
60% { transform: translateY(-10px); }
80% { transform: translateY(0); }
100% { transform: translateY(0); }
}
.nya-cta-button {
margin-top: 20px;
padding: 12px 24px;
background-color: #3498db;
color: white;
font-size: 2em;
font-weight: bold;
border: none;
border-radius: 5px;
cursor: pointer;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease, transform 0.2s ease;
}
.nya-cta-button:hover {
background-color: #217dbb;
transform: scale(1.05);
}
</style>
</head>
<body>
<img src="（画像のURL）" alt="矢印" class="nya-bounce-arrow">
<button class="nya-cta-button">今すぐ申し込む</button>
</body>
</html>使用した矢印の画像は下記からダウンロードできるにゃ。
なお、ボタンを押すとダウンロードする仕組みに関しては、下記の記事でまとめています。
よかったらご参照ください。
ボタンなどに、aタグを記載して、PDFのURLリンクにするとPDFのプレビューが表示されます。 動作確認できます プレビューが表示されるにゃ ただ、プレビューを表示させたくない時もあると思います。 その為 …
ユーザーがLINEやメール登録をしてくれた時、または感想を送ってくれたりした時など、下記のような流れで特典ファイルを配ることがあると思います。 しかし、何も対策をせずに、配布するファイルをサーバーにアップロードすると、G …
