Jump to the content

CSSで手軽にカスタムイージングを使おう!

CSS

    どうも、イソップです。

    今日は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アニメーションが使えるブラウザなら、どれでも使用可能です。

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×