transition-timing-functionのcubic-bezierを使ってみる

transition-timing-functionのcubic-bezierを使ってイージングを設定してみます。

サンプルコード

まずはtransition-timing-functionを特に設定せずに実装してみます。

HTML

buttonにオンマウスでアニメーションするようにします。

<button>オンマウスで移動</button>
<div class="sample"></div>

CSS

.sample {
	width: 100px;
	height: 100px;
	-webkit-transform: translateX(0);
	transform: translateX(0);
	background: #E74C3C;
	-webkit-transition: 1s;
	transition: 1s;
}
button:hover + .sample {
	-webkit-transform: translateX(200px);
	transform: translateX(200px);
}

特に設定しない場合のデモページ
　

cubic-bezierを設定する場合、オンラインツールで調整すると便利です。
今回はCeaser – CSS Easing Animation Tool – Matthew Leinというサイトを使ってみます。

上記ページ内にあるEasingの項目を設定することで、下のコードの数値が調整されます。

今回はeaseOutBackを選択して、以下のようにしてみました。

CSS

.sample {
	width: 100px;
	height: 100px;
	-webkit-transform: translateX(0);
	transform: translateX(0);
	background: #E74C3C;
	-webkit-transition: 1s cubic-bezier(0.175, 0.885, 0.320, 1.275);
	transition: 1s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
button:hover + .sample {
	-webkit-transform: translateX(200px);
	transform: translateX(200px);
}

easeOutBackのデモページ
　

左側のハンドルを動かすことで、カスタマイズすることもできます。

easeOutBackの戻る動きを大きくしてみました。

CSS

.sample {
	width: 100px;
	height: 100px;
	-webkit-transform: translateX(0);
	transform: translateX(0);
	background: #E74C3C;
	-webkit-transition: 1s cubic-bezier(0.175, 0.885, 0.350, 1.650);
	transition: 1s cubic-bezier(0.175, 0.885, 0.350, 1.650);
}
button:hover + .sample {
	-webkit-transform: translateX(200px);
	transform: translateX(200px);
}

easeOutBackの調整後のデモページ
　

【参考サイト】

• Ceaser – CSS Easing Animation Tool – Matthew Lein