Alexx The Rocks

雑記。

【css】transitionで使える値の備忘録【ease】

Categoryweb制作
tag

簡単にアニメーションを付けたい

令和のご時世で、例えば、マウスオーバーしてボタン画像を差し替えるってのもいちいち画像を二つ作ったりするのに手間が掛かるし、簡単なボタンであればcssでデザインした方が早い事も多々ある。

そのままcssでボタンを作って、色変えや透過で変化を付ける時、何の気なしに今までは

.hoge {
	transition: .3s ease;
}

.hoge:hover {
	opacity: .8;
}

のような記述で済ませてたが、このところ頻繁に使うので改めて備忘録にしたためる。

簡単に使えるのは5種類+1

transitionプロパティで簡単に使えるのは以下。

  • ease (ゆっくり始まりゆっくり終わる)
  • linear (一定)
  • ease-in (ゆっくり始まる)
  • ease-out (ゆっくり終わる)
  • ease-in-out (ゆっくり始まってゆっくり終わる)

その他「steps(n)」もあるようだが、nの回数分コマ送りになるので今回は割愛。

可視化すると下記のようになる。
※変化の度合いを見るためにtransitionでなくanimationプロパティを使用している

ease

linear

ease-in

ease-out

ease-in-out

もっと複雑な事もやりたい時

cssで簡単に使えるのは上記だが、easing関数は他にも用意されている。

イージング関数チートシート
https://easings.net/ja

「cubic-bezier」を使えばもっと幅が広がる模様。もっとも、こちらは画像を拡大縮小するとか、そういう場合の方が見栄え的にも使えるかも。