| 属性名 | animation-timing-function |
|---|---|
| 値 | <single-animation-timing-function> [, <single-animation-timing-function> ]* |
| 値の詳細 |
linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) |
| 初期値 | ease |
| 適用可能要素 | すべての要素 (::before, ::after を含む) |
| 継承 | 継承しない |
| メディア | visual |
| アニメーション | 不可 |
| CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| CSS3 | 10 | 5(-moz) 16 | 4(-webkit) 43 | 15(-webkit) 30 | 4(-webkit) 9 |
アニメーションの変化のタイミングを指定します。アニメーションに関する概要は animation を参照してください。
| 値 | 説明 |
|---|---|
| linear | 最初から最後まで同じ速さで変化します。 |
| ease | 最初すばやく、後半ゆっくり変化します。 |
| ease-in | 最初ゆっくり、後半すばやく変化します。 |
| ease-out | 最初すばやく、後半ゆっくり変化します。ease に似ていますが、開始時は ease-out の方が若干素早いです。 |
| ease-in-out | 最初ゆっくり、中盤すばやく、後半ゆっくり変化します。 |
| step-start | 最初からアニメーション終了時の状態にします。 |
| step-end | 最後に一瞬でアニメーション終了時の状態にします。 |
| steps(n, flag) | n段階で変化します。flag に start を指定すると、開始直後に 1段階目の変化が発生します。end を指定すると、最初のインターバル経過後に 1段階目の変化が発生します。デフォルトは 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;
}
80% {
width: 500px;
}
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-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); }
<div class="atf atf-linear">linear</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>