【CSS】簡単なアニメーションの作り方【transform】

アニメーションについて書いた他の記事は以下で．

• 【CSS】簡単なアニメーションの作り方【transition】
• 【CSS】簡単なアニメーションの作り方【animation】【keyframes】

CSS だけを使ってもアニメーションは作れる

【CSS】簡単なアニメーションの作り方【transition】でちょっとした動きを CSS だけで実現できると書いたが transform を使うとさらに複雑な動きが出来る．
transform はその名の通り，「変形」を意味する．
transition は「変化」なので，「変形」した状態に「変化」させれば，これはアニメーションとなる．

今回は transition に transform を加えるとどういうことが出来るかを書いてみる．

下ではマウスをオーバーさせる hover 時にどう変化するかということで CSS を記述している．
よって，マウスの操作が必要となる．

transform で図形を動かしてみる

下線(アンダーライン)を伸ばす

静的なものであれば，HTML と CSS で下線をつけるページで，既に作り方は紹介している．

ここでは動的に表示する方法を説明する．

伸ばすだけなのでこれは scale を使う．
注意点として，after を hover に使う時は
hover::after
とする必要がある．
after:hover
では動かない．

動作サンプル

CSS

#extendunderline {
  position: relative;
  overflow: hidden;
  padding: 4px;
}
#extendunderline::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: solid 1px blue;
  transform: scaleX(0);
  transition: all 0.6s 0.1s ease;
  content: "";
}
#extendunderline:hover::after {
  transform: scaleX(1);
}

HTML

<span id="extendunderline">
  マウスが上に来た時に下線を伸ばす
</span>

左から下線(アンダーライン)を伸ばす

中央から伸びていく動作が気に入らない場合は簡単に変更できる．

動作サンプル

CSS

これは先ほどの CSS に一行を加えるだけ．基準点を左端にしている．
基準点は transform-origin を使う．

#extendunderline::after {
  transform-origin: left;
}

回転させる

何に使うか分からないが回転させることもできる．
これは rotate を使う．

注意すべき点として，span では回らない．div にする必要がある．

動作サンプル

CSS

#plus {
  margin: 0 auto;
  padding: 8px;
  border: dotted 2px red;
  border-radius: 50%;
  color: red;
  transition: all 0.6s 0.1s ease;
  width: 1rem;
  line-height: 1rem;
}
#plus:hover {
  transform: rotateZ(360deg);
}

HTML

<div id="plus">
  ＋
</div>