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

アニメーションの速度曲線を設定するCSSプロパティはどれ？animation-timing-functionの使い方を解説

CSSでアニメーションの速度曲線（イージング）を設定するには、animation-timing-functionプロパティを使用します。このプロパティを使うことで、アニメーションが開始から終了までどのように進行するかを細かく制御できます。

animation-timing-functionの主な値

  • ease：ゆっくり始まり、途中で速くなり、最後にまたゆっくり終わる標準的なカーブです（初期値）。
  • ease-in：ゆっくりと始まり、だんだん加速していく効果です。
  • ease-out：速く始まり、だんだん減速しながら終わる効果です。
  • ease-in-out：始めと終わりがゆっくりで、中間が速い効果です。
  • linear：一定の速度で変化します。
  • cubic-bezier()：独自の速度曲線を数値で定義できます。

サンプルコード：easeとease-inの違いを確認する

以下のコードを実行すると、easeとease-inそれぞれのアニメーション効果を実際に確認できます。2つのdiv要素に異なるタイミング関数を適用し、動きの違いを比較してみましょう。

<!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;}
#demo2 {animation-timing-function: ease-in;}
</style>
</head>
<body>
<div id = "demo1">ease effect</div>
<div id = "demo2">ease-in effect</div>
</body>
</html>

コードの解説

この例では、まず@keyframes myanimでアニメーションの動きを定義しています。leftプロパティを100pxから200pxへ移動させるシンプルな内容です。

次に、各div要素に対して以下の設定を行っています。

  • #demo1にはeaseを指定しており、滑らかで自然な加減速の動きになります。
  • #demo2にはease-inを指定しており、静止状態から徐々に加速していくような動きになります。

さらに、animation-duration: 2s;で1回のアニメーション時間を2秒に設定し、animation-direction: alternate-reverse;で往復方向の再生を、animation-iteration-count: 3;で3回繰り返すようにしています。

まとめ

アニメーションの速度曲線を制御したい場合は、animation-timing-functionプロパティを使います。用途に応じてeaseやease-inなどのキーワードを選ぶだけでなく、cubic-bezier()関数を使えばより高度なイージング表現も可能です。UIのユーザー体験を向上させるために、ぜひ活用してみてください。

  1. CSSのborder-widthプロパティの使い方を解説！ボーダーの太さを指定する方法

    border-widthプロパティとは？ CSSのborder-widthプロパティは、要素の境界線（ボーダー）の太さを指定するためのプロパティです。上下左右それぞれの辺に対して個別に太さを設定したい場合は、border-top-width（上）、border-right-width（右）、border-bottom-width（下）、border-left-width（左）を使用します。 なお、border-widthによる指定は、border-styleプロパティが「none」以外の値（solid、dashedなど）に設定されている場合にのみ反映されます。スタイルの指定を忘れると境界線自体

  2. CSSのmax-heightプロパティとは？使い方と実例をわかりやすく解説

    max-heightプロパティとは？CSSのmax-heightプロパティを使用すると、要素のコンテンツボックスに固定の最大高さを定義できます。このプロパティが適用された要素は、実際の高さがmax-heightの値よりも大きい場合でも、コンテンツボックスがそれ以上高くなることはありません。特にoverflow: hidden;と組み合わせることで、はみ出したコンテンツを非表示にし、レイアウトをすっきりと整えることができます。構文CSS max-heightプロパティの構文は以下のとおりです。Selector {    max-height: /*値*/ }max-heigh