疑似要素で矢印作ってロールオーバーでアニメーションさせてみよう

css

ふと、思ったのでちょっとした忘備録。
よくCSSでリストナビゲーションを見るが、「＞」このような矢印ボタンをよく見ます。以前は画像にして背景画像にしてロールオーバーで切り替えるなんて事やってた時期もありますが、現在はCSSも発展してきているので、CSSのみで「＞」を作ってロールオーバー時にアニメーションさせてみた。

今回の目的とサンプル

では実際に作ったサンプルですが、今回はこんな流れです。

  • CSSの疑似要素を使って「＞」のような矢印を作成する
  • 疑似要素にCSSのTransitionでTransformを指定する
  • aタグをロールオーバーしたら疑似要素をアニメーションで下向きにする

See the Pen 疑似要素で矢印作ってロールオーバーでアニメーションさせてみよう by kiriyama (@kirikirimai) on CodePen.

ソースコードの解説

それでは、簡単にhtmlとCSSのソースコードに関して説明していきます。

HTML

htmlに関しては、ごく普通にありふれたソースなので説明は特に不要かと。

CSS

ul li a::after{
  content:"";
  display:block;
  width:10px;
  height:10px;
  border-top:2px solid #333;
  border-right:2px solid #333;
  position:absolute;
  top:40%;
  right:10px;
  transform:rotate(45deg);
  transition:transform 0.3s ease;
}

ul li a:hover:after{
  transform:rotate(135deg);
}

CSSに関しては、今回のタイトルに関係ある部分だけ載せています。
他は普通の設定なのでCodepenで確認してみてください。

疑似要素（after）で三角形を作る

まずは疑似要素（今回はafterですが、beforeでも構いません）で、displayをblockにして縦横10pxの空の要素を作りpositionで絶対配置にして位置を右側に調整しています。
ポイントはその空の要素にborderでtopとrightで線を付けてtransformのrotateプロパティで45度回転させます。すると三角形の矢印ができます。

transitionによるアニメーション

あとは、ロールオーバーでこの三角形の矢印をアニメーションで回転させたいので、transitionでtransformを設定しておきます。
そしてaタグのロールオーバー時に疑似要素をtransformで下向きに135度回転させています。
これで完成です。

まとめ

ざっと説明しましたが、ここでもCSSのtransitionが出てきました。
CSSのtransitionについては「CSSのtransitionによるアニメーションを勉強してみる」を参照してみてください。