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

css

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

今回の目的とサンプル

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

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

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

ソースコードの解説

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

HTML

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

CSS

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によるアニメーションを勉強してみる」を参照してみてください。