CSSのeasingでアニメーションの動きを変更する方法を徹底解説!

2024.01.03
cssのeasingでアニメーションの動きを変更する方法を徹底解説

「CSSのeasingでtransitionの動きに変化を加えたい」
「easingの使い方がよくわからない」

上記のような悩みを抱えている方もいるのではないでしょうか?

easingに指定する値にはさまざまな種類があるので、どれを指定すれば自分が理想とする動きのなるのかわかりづらいですよね。

今回、WEBCAMP MEDIAでは、CSSのeasingでアニメーションの動きを変更する方法について解説します。

  • easingについて
  • easing一覧
  • cubic-bezierとは

以上の項目について解説します。

この記事を読むことで、easingを使ってアニメーションの動きに変化を加える方法が理解できるので、ぜひチェックしてみてくださいね!

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の使い方

cubic-bezierは、easingを指定する値と同じくtransitionプロパティの第三引数に入力します。

 .cubic-bezier{
      transition:all 3s cubic-bezier(.02,.89,.94,.18);
    }

cubic-bezerのジェネレーターで取得した値を配置するだけで簡単に実装できます。

まとめ

今回は、CSSのeasingでアニメーションの動きを変更する方法について解説しましたが、いかがでしたでしょうか?

easingを使うことで、アニメーションの動きに変化を加えることができます。

また、cubic-bezier関数を使うとアニメーションの動きを自分好みに変更できます。

この記事を参考にぜひ挑戦してみてくださいね!

\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP


関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5