どうも、イソップです。 今日はCSSアニメーションでのイージングの話です。 CSSで用意されている、ease , linear , ease-in , ease-out のイージングは、 バリエーションが少ないのが残念なところですよね。 もっとJSのような動きをつけたいこともよくあります。 cubic-bezier() で自分でイージングを定義出来ますが、仕組みがわからないと手を出せないですし、 cubic-bezier.comなどで、ベジェ曲線を作ってもいいですが、結構手間だったりします。 そこで、個人的に使っているイージングスニペットを紹介します。 このスニペットを使えば、すぐにCSSアニメーションでイージングが使えます。 かなり便利ですよ〜。 最近は凝った演出を実装する機会が多く、スマホでも比較的処理が軽いCSSアニメーションを多用しています。 Sassのイージングスニペット まずは
![CSSで手軽にカスタムイージングを使おう!](https://cdn-ak-scissors.b.st-hatena.com/image/square/bbc3ef0f914e4c3a545282334526b4d84fe49ca7/height=288;version=1;width=512/https%3A%2F%2Fwp-blog.yuhiisk.com%2Fwp-content%2Fuploads%2F2019%2F04%2Feyecatch_sass.jpg)