CSSだけで作る矢印のアニメーション方法を現役エンジニアが解説【初心者向け】

初心者向けにCSSだけで作る矢印のアニメーション方法について解説しています。最初にHTMLとCSSで矢印を作る場合の基本の書き方を説明します。次にjQueryを使って矢印を動かす方法をサンプルで見ていきましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

CSSだけで作る矢印のアニメーション方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

CSSだけで作る矢印のアニメーション方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

デモを見てみよう

HTML

<a class="arrow"></a>

 

CSS

.arrow {
  display: block;
  width: 8px;
  height: 8px;
  border-top: 1px solid #b0b0b0;
  border-right: 1px solid #b0b0b0;
  transform: rotate(45deg);
}

 

表示結果

See the Pen
2020-06-18-sample11
by YOHEI INAI (@yohei_inai)
on CodePen.

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

CSSのソース解説

aタグは、インライン要素なので、まずはブロックレベル要素にするための変更を加えます。

display: block;

次に、幅と高さをそれぞれ8pxの大きさに定めます。

width: 8px;
height: 8px;

この正方形の要素の上部と右側に棒線の装飾を施します。

border-top: 1px solid #b0b0b0;
border-right: 1px solid #b0b0b0;

形状としては、下図の表示になります。

さらに、45度の角度まで回転させることによって、右向きの矢印の形状になります。

transform: rotate(45deg);

 

矢印を動かしてみよう

変化を加えて結果までの過程(プロセス)を表現できるtransitionも設定しておいてから、クラス名の切り替えにてアニメーションを動作させれます。

 

HTML

<a class="arrow"></a>

 

CSS

.arrow {
  display: block;
  width: 8px;
  height: 8px;
  border-top: 1px solid #b0b0b0;
  border-right: 1px solid #b0b0b0;
  transform: rotate(45deg);
  transition: all 0.3s;
}

.arrow.rotate {
  transform: rotate(135deg);
}

 

jQuery

$(".arrow").on("click", function () {
   $(this).toggleClass("rotate");
});

 

実行結果

See the Pen
2020-06-18-sample12
by YOHEI INAI (@yohei_inai)
on CodePen.

 

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。