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

最終更新日: 公開日: 2022年07月

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

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>
 

Contact

ご質問等ありましたら,お手数ですが弊社の個人情報保護方針をお読み頂いた上でフォームからお願い致します.

 
   
contact
Pagetop