CSSのeasingでアニメーションの動きを変更する方法を徹底解説！
「CSSのeasingでtransitionの動きに変化を加えたい」
「easingの使い方がよくわからない」
上記のような悩みを抱えている方もいるのではないでしょうか？
easingに指定する値にはさまざまな種類があるので、どれを指定すれば自分が理想とする動きのなるのかわかりづらいですよね。
今回、WEBCAMP MEDIAでは、CSSのeasingでアニメーションの動きを変更する方法について解説します。
- easingについて
- easing一覧
- cubic-bezierとは
以上の項目について解説します。
この記事を読むことで、easingを使ってアニメーションの動きに変化を加える方法が理解できるので、ぜひチェックしてみてくださいね！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
CSSのeasingとは
easingとは、CSSのtransitionプロパティで実装するアニメーションの動きに変化を加える方法です。
easingは、transitionに指定する複数の値で動きを変えることができます。
easingを使うことで、アニメーションの動きに変化を加えておしゃれなサイトを作成できます。
CSSで利用できるeasing一覧
CSSで利用できる主なeasingの種類は下記の通りです。
- linear
- ease
- ease-in
- ease-out
- ease-in-out
それぞれの特徴と使い方について解説します。
解説に使う基本のコードは下記になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.container div{
width:100px;
height:20px;
line-height: 20px;
padding:10px 20px;
color:#ffffff;
background:skyblue;
text-align:center;
}
.container:hover div{
margin-left:400px;
}
</style>
</head>
<body>
<div class="container">
<div>lテスト</div>
</div>
</body>
</html>実行結果
上記の「テスト」というボックスにマウスオーバーしたとき、margin-leftを使って右に400px移動する際の変化を、easingの各値を使って表現していきます。
linerの特徴と使い方
linerは、アニメーションを一定の動きで実行できる値です。
CSS
.linear{
transition:3s linear;
}HTML
<body>
<div class="container">
<div class="linear">linerのテスト</div>
</div>
</body>easeの特徴と使い方
easeは、始まりから徐々に早くなり、終わりが近づくにつれて徐々に遅くなります。
.ease{
transition:3s ease;
}HTML
<body>
<div class="container">
<div class="ease">easeのテスト</div>
</div>
</body>ease-inの特徴と使い方
ease-inは、アニメーションの始まりから終わりにかけて徐々に早くなる動きを実装できます。
CSS
.ease-in{
transition:3s ease-in;
}HTML
<body>
<div class="container">
<div class="ease-in">ease-inのテスト</div>
</div>
</body>ease-outの特徴と使い方
ease-outを指定すると、終わりが近くに連れて徐々にアニメーションの動きが遅くなります。
CSS
.ease-out{
transition:3s ease-out;
}HTML
<body>
<div class="container">
<div class="ease-out">ease-outのテスト</div>
</div>
</body>ease-in-out
ease-in-outは、始まりから徐々に早くなり、終わりが近づくにつれて徐々に遅くなります。
easeと同じ動きですが、ease-in-outの方が動き出しと終わりのスピードが遅いという特徴があります。
ease-in-outは、ease-inとease-outを組み合わせた動きと考えると良いでしょう。
CSS
.ease-in-out{
transition:3s ease-in-out;
}HTML
<body>
<div class="container">
<div class="ease-in-out">ease-in-outのテスト</div>
</div>
</body>easingを自作できるcubic-bezierとは
cubic-bezierは、easingの動きを自分で指定できる関数で、easingの値の中に自分が表現したい動きが見つからないときに最適です。
cubic-bezieは、ベジェ曲線というグラフを使ってeasingの動きを曲線で表現する方法を採用しています。
cubic-bezierを使って自分で動きを作るには、cubic-bezierのジェネレータを使うことをおすすめします。
ジェネレーターを使うと、ベジェ曲線をドラッグ＆ドロップで操作して自分好みの動きを直感的に作成できます。
cubic-bezierの使い方
cubic-bezierは、easingを指定する値と同じくtransitionプロパティの第三引数に入力します。
.cubic-bezier{
transition:all 3s cubic-bezier(.02,.89,.94,.18);
}cubic-bezerのジェネレーターで取得した値を配置するだけで簡単に実装できます。
まとめ
今回は、CSSのeasingでアニメーションの動きを変更する方法について解説しましたが、いかがでしたでしょうか？
easingを使うことで、アニメーションの動きに変化を加えることができます。
また、cubic-bezier関数を使うとアニメーションの動きを自分好みに変更できます。
この記事を参考にぜひ挑戦してみてくださいね！
