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

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

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

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座の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では初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

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