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

公開日:2021年12月10日

Categoryweb制作

Contents

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

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

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

.hoge {
	transition: .3s ease;
}

.hoge:hover {
	opacity: .8;
}

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

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

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

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

ease

linear

ease-in

ease-out

ease-in-out

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

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

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