どうも、イソップです。
今日はCSSアニメーションでのイージングの話です。
CSSで用意されている、ease , linear , ease-in , ease-out のイージングは、
バリエーションが少ないのが残念なところですよね。
もっとJSのような動きをつけたいこともよくあります。
cubic-bezier() で自分でイージングを定義出来ますが、仕組みがわからないと手を出せないですし、
cubic-bezier.comなどで、ベジェ曲線を作ってもいいですが、結構手間だったりします。
そこで、個人的に使っているイージングスニペットを紹介します。
このスニペットを使えば、すぐにCSSアニメーションでイージングが使えます。
かなり便利ですよ〜。
最近は凝った演出を実装する機会が多く、スマホでも比較的処理が軽いCSSアニメーションを多用しています。
Sassのイージングスニペット
まずは実際のデモを見てください。
See the Pen BQBJwv by Youhei Isokawa (@yuhiisk) on CodePen.
JavaScriptじゃありません、CSSアニメーションです。
数年前、Compassを使っていた頃に出会った compass-ceaser-easing にインスパイアされました。
これはCompassのエクステンションなのですが、中でcubic-bezierによるイージングが定義されています。
それを、自分でscssに書き直しました。
// イージング値の取得
@function returnEaseTypeToCubicBezier($type) {
$easingValue: "";
@if $type == "linear" {
$easingValue: "0.250, 0.250, 0.750, 0.750";
}
@else if $type == "ease" {
$easingValue: "0.250, 0.100, 0.250, 1.000";
}
@else if $type == "ease-in" {
$easingValue: "0.420, 0.000, 1.000, 1.000";
}
@else if $type == "ease-out" {
$easingValue: "0.000, 0.000, 0.580, 1.000";
}
@else if $type == "ease-in-out" {
$easingValue: "0.420, 0.000, 0.580, 1.000";
}
@else if $type == "easeInQuad" {
$easingValue: "0.550, 0.085, 0.680, 0.530";
}
@else if $type == "easeInCubic" {
$easingValue: "0.550, 0.055, 0.675, 0.190";
}
@else if $type == "easeInQuart" {
$easingValue: "0.895, 0.030, 0.685, 0.220";
}
@else if $type == "easeInQuint" {
$easingValue: "0.755, 0.050, 0.855, 0.060";
}
@else if $type == "easeInSine" {
$easingValue: "0.470, 0.000, 0.745, 0.715";
}
@else if $type == "easeInExpo" {
$easingValue: "0.950, 0.050, 0.795, 0.035";
}
@else if $type == "easeInCirc" {
$easingValue: "0.600, 0.040, 0.980, 0.335";
}
@else if $type == "easeInBack" {
$easingValue: "0.600, -0.280, 0.735, 0.045";
}
@else if $type == "easeOutQuad" {
$easingValue: "0.250, 0.460, 0.450, 0.940";
}
@else if $type == "easeOutCubic" {
$easingValue: "0.215, 0.610, 0.355, 1.000";
}
@else if $type == "easeOutQuart" {
$easingValue: "0.165, 0.840, 0.440, 1.000";
}
@else if $type == "easeOutQuint" {
$easingValue: "0.230, 1.000, 0.320, 1.000";
}
@else if $type == "easeOutSine" {
$easingValue: "0.390, 0.575, 0.565, 1.000";
}
@else if $type == "easeOutExpo" {
$easingValue: "0.190, 1.000, 0.220, 1.000";
}
@else if $type == "easeOutCirc" {
$easingValue: "0.075, 0.820, 0.165, 1.000";
}
@else if $type == "easeOutBack" {
$easingValue: "0.175, 0.885, 0.320, 1.275";
}
@else if $type == "easeInOutQuad" {
$easingValue: "0.455, 0.030, 0.515, 0.955";
}
@else if $type == "easeInOutCubic" {
$easingValue: "0.645, 0.045, 0.355, 1.000";
}
@else if $type == "easeInOutQuart" {
$easingValue: "0.770, 0.000, 0.175, 1.000";
}
@else if $type == "easeInOutQuint" {
$easingValue: "0.860, 0.000, 0.070, 1.000";
}
@else if $type == "easeInOutSine" {
$easingValue: "0.445, 0.050, 0.550, 0.950";
}
@else if $type == "easeInOutExpo" {
$easingValue: "1.000, 0.000, 0.000, 1.000";
}
@else if $type == "easeInOutCirc" {
$easingValue: "0.785, 0.135, 0.150, 0.860";
}
@else if $type == "easeInOutBack" {
$easingValue: "0.680, -0.550, 0.265, 1.550";
}
@return unquote($easingValue);
}
// cubic-bezierの呼び出し
@function ease($type) {
@return unquote("cubic-bezier(#{returnEaseTypeToCubicBezier($type)})");
}
使い方
使い方は超絶シンプルです。
イージング名からcubic-bezierを取得する ease 関数を定義したので、次のように使います。
.element {
transition: transform .7s ease('easeOutExpo');
}
コンパイル後のCSSです。
.element {
transition: transform 0.7s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
はい、完全にイケてます。
イージングの種類
- linear
- ease
- ease-in
- ease-in-out
- easeInQuad
- easeInCubic
- easeInQuart
- easeInQuint
- easeInSine
- easeInExpo
- easeInCirc
- easeInBack
- easeOutQuad
- easeOutCubic
- easeOutQuart
- easeOutQuint
- easeOutSine
- easeOutExpo
- easeOutCirc
- easeOutBack
- easeInOutQuad
- easeInOutCubic
- easeInOutQuart
- easeInOutQuint
- easeInOutSine
- easeInOutExpo
- easeInOutCirc
- easeInOutBack
※デフォルトのイージングも定義し直しています。
関数（@funciton）だから使いまわせる
じゃんじゃん使いまわしちゃってください。
コピペしちゃってください。
効率化しちゃってください。
CSSアニメーションが使えるブラウザなら、どれでも使用可能です。