CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでアニメーションを「ゆっくり開始 → 高速 → ゆっくり終了」に設定する方法（ease）

CSSでアニメーションの速度変化をコントロールしたい場合は、animation-timing-functionプロパティを使用します。このプロパティにease値を設定すると、アニメーションがゆっくりと始まり、途中で加速し、最後はゆっくりと終わる滑らかな動きになります。

ease値の特徴

easeはanimation-timing-functionのデフォルト値で、cubic-bezier(0.25, 0.1, 0.25, 1)という3次ベジェ曲線に相当します。開始時と終了時に緩やかな速度変化が生まれるため、自然で洗練された印象を与えるアニメーションを実現できます。

サンプルコード

以下の例では、黄色いボックスが左右に移動するアニメーションに対して、easeによるイージングを適用しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 150px;
            height: 200px;
            position: relative;
            background-color: yellow;
            animation-name: myanim;
            animation-duration: 2s;
            animation-direction: alternate-reverse;
            animation-iteration-count: 3;
         }
         @keyframes myanim {
            from {left: 100px;}
            to {left: 200px;}
         }
         #demo1 {animation-timing-function: ease;}
      </style>
   </head>
   <body>
      <div id = "demo1">ease effect</div>
   </body>
</html>

コードの解説

  • animation-name: myanim; … 適用する@keyframesの名前を指定します。
  • animation-duration: 2s; … アニメーション1回分の所要時間を2秒に設定します。
  • animation-direction: alternate-reverse; … アニメーションを逆方向から再生し、往復する動きを作ります。
  • animation-iteration-count: 3; … アニメーションを3回繰り返します。
  • #demo1 { animation-timing-function: ease; } … 対象の要素にeaseのイージングを適用します。

なお、animation-timing-functionには他にもlinear（一定速度）、ease-in（ゆっくり開始）、ease-out（ゆっくり終了）、ease-in-out（開始・終了ともに緩やか）などの値があり、目的に応じて使い分けることで、より表現力豊かなアニメーションを作成できます。

  1. JavaScriptでCSS変数を取得・設定する方法

    JavaScriptを活用すると、CSS変数（カスタムプロパティ）の値を動的に読み取ったり、書き換えたりすることができます。ポイントになるのは、次の3つのメソッドです。 1. getComputedStyle() ― 適用済みスタイルの取得 getComputedStyle()メソッドは、対象の要素に実際に適用されているすべてのスタイル情報を含むオブジェクトを返します。このオブジェクトには、CSS変数の値も含まれています。 2. getPropertyValue() ― 目的のプロパティ値の取得 getComputedStyle()が返したオブジェクトに対してgetPropertyVal

  2. CSSで角丸のアクティブボタンとホバーボタンを作成する方法

    Webサイトのナビゲーションやページネーションなどで活躍する「角丸ボタン」。CSSを使えば、画像やJavaScriptに頼らず、アクティブ状態とホバー状態を持つ角丸ボタンを簡単に作成できます。 ホバー効果を追加するには:hoverセレクターを使用し、角丸のデザインにはborder-radiusプロパティを使用します。以下のコードを実行して、実際の動作を確認してみてください。 使用する主なCSSの仕組み :hoverセレクター マウスカーソルが要素の上に乗ったときのスタイルを定義します。今回の例では「a:hover:not(.active)」という書き方で、アクティブなリンク以外にだけホバー効果