CSS - animation-timing-function

• トップ
• CSSリファレンス
• animation-timing-function

概要

説明

アニメーションの変化のタイミングを指定します。アニメーションに関する概要は animation を参照してください。

linear

最初から最後まで同じ速さで変化します。

linear(...)

linear(0, 0.1, 1) は最初 0 変化し、50% 時間経過時点で 0.1 変化し、100% 時点で 1 変化します。
linear(0, 0.1 30%, 1) は最初 0 変化し、30% 時間経過時点で 0.1 変化し、100% 時点で 1 変化します。
linear(0, 0.1 30% 50%, 1) は最初 0 変化し、30%～50% 時間経過の間 0.1 変化し、100% 時点で 1 変化します。

ease

最初すばやく、後半ゆっくり変化します。

ease-in

最初ゆっくり、後半すばやく変化します。

ease-out

最初すばやく、後半ゆっくり変化します。ease に似ていますが、開始時は ease-out の方が若干素早いです。

ease-in-out

最初ゆっくり、中盤すばやく、後半ゆっくり変化します。

step-start

最初からアニメーション終了時の状態にします。

step-end

最後に一瞬でアニメーション終了時の状態にします。

steps(n, mode)

n段階で段階的に変化します。n を 5 とした場合、mode によって下記の様に変化します。規定値は end です。

• jump-start : 1/5 → 2/5 → 3/5 → 4/5 → 5/5
• jump-end   : 0/5 → 1/5 → 2/5 → 3/5 → 4/5
• jump-both : 1/6 → 2/6 → 3/6 → 4/6 → 5/6
• jump-none : 0/4 → 1/4 → 2/4 → 3/4 → 4/4
• start : jump-start と同じ
• end : jump-end と同じ

cubic-bezier(x1, y1, x2, y2)

[0.0, 0.0] から始まり、[x1, y1], [x2, y2] を経由して [1.0, 1.0] に到達する三次ベジェ曲線に従い変化します。X軸は時間経過率を、Y軸は変化率を示します。x1, x2 は、0.0～1.0 の範囲で指定します。y1, y2 は 1.0 を超えたり負の値を指定することができます。

使用例

@keyframes myframe {
  from {
    width: 0px;
  }
  to {
    width: 500px;
  }
}
.atf {
  height:20px;
  margin: 5px;
  padding: 2px;
  background: #ccf;
  white-space: nowrap;
  font-weight: bold;
  animation: myframe 5s infinite both;
}
.atf-linear { animation-timing-function: linear; }
.atf-linear-function { animation-timing-function: linear(0, 0.1, 1); }
.atf-ease { animation-timing-function: ease; }
.atf-ease-in { animation-timing-function: ease-in; }
.atf-ease-out { animation-timing-function: ease-out; }
.atf-ease-in-out { animation-timing-function: ease-in-out; }
.atf-step-start { animation-timing-function: step-start; }
.atf-step-end { animation-timing-function: step-end; }
.atf-steps { animation-timing-function: steps(3, start); }
.atf-cubic-bezier { animation-timing-function: cubic-bezier(0.1, 2.3, 0.3, 0.3); }
.atf-jump-start { animation-timing-function: steps(5, jump-start); }
.atf-jump-end { animation-timing-function: steps(5, jump-end); }
.atf-jump-both { animation-timing-function: steps(5, jump-both); }
.atf-jump-none { animation-timing-function: steps(5, jump-none); }

<div class="atf atf-linear">linear</div>
<div class="atf atf-linear-function">linear(0, 0.1, 1)</div>
<div class="atf atf-ease">ease</div>
<div class="atf atf-ease-in">ease-in</div>
<div class="atf atf-ease-out">ease-out</div>
<div class="atf atf-ease-in-out">ease-in-out</div>
<div class="atf atf-step-start">step-start</div>
<div class="atf atf-step-end">step-end</div>
<div class="atf atf-steps">steps</div>
<div class="atf atf-cubic-bezier">cubic-bezier</div>
<hr>
<div class="atf atf-jump-start">jump-start</div>
<div class="atf atf-jump-end">jump-end</div>
<div class="atf atf-jump-both">jump-both</div>
<div class="atf atf-jump-none">jump-none</div>

関連項目

• @keyframes
• animation
• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state
• transition-timing-function

リンク

• https://drafts.csswg.org/css-animations/#animation-timing-function
• https://drafts.csswg.org/css-easing/#easing-functions
• https://developer.mozilla.org/ja/docs/Web/CSS/animation-timing-function
• https://developer.mozilla.org/ja/docs/Web/CSS/easing-function
• https://caniuse.com/?search=animation-timing-function
• https://caniuse.com/?search=easing-function