animation-timing-function
アニメーション変化のタイミングや変化割合等を変更することができます。指定できる値は、『transition-timing-function』と同じです。
ブラウザのバージョンによっては、ベンダープレフィックス『webkit』、『moz』、『ms』等を付けないと動かない場合があるので、使用する際はベンダープレフィックスを付けるようにした方が無難です。またPCのスペックによっては動きがカクついてしまう場合がありますのでご注意下さい。
サンプルコード
style.css
/* 開始・終了を緩やかに（初期値） */
div { animation-timing-function: ease;}
/* 一定速度 */
.linear { animation-timing-function: linear;}
/* 開始をゆっくり */
.ease-in { animation-timing-function: ease-in;}
/* 終了をゆっくり */
.ease-out { animation-timing-function: ease-out;}
/* 開始・終了ともにゆっくり */
.ease-in-out { animation-timing-function: ease-in-out;}
/* カスタムのベジェ曲線で細かく制御 */
.custom { animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);}
/* 各タイミング関数の違いを比べる実践例 */
.spinner-smooth { animation-timing-function: ease; animation-name: rotate; animation-duration: 1s; animation-iteration-count: infinite;}
.spinner-linear { animation-timing-function: linear; animation-name: rotate; animation-duration: 1s; animation-iteration-count: infinite;}
@keyframes rotate {
from { transform: rotate(0deg);}
to { transform: rotate(360deg);}
}
指定可能な値一覧
| 値 | 効果 |
|---|---|
| ease | 開始付近と終了付近の動きを滑らかにします。『animation-timing-function』の指定を省略した場合はこの『ease』が指定されているものとして扱われます。 |
| linear | 一定の速度で変化します。 |
| ease-in | 開始付近の動きを緩やかにします。 |
| ease-out | 終了付近の動きを緩やかにします。 |
| ease-in-out | 開始付近と終了付近の動きを緩やかにします。 |
ブラウザでの表示結果
div {
background: #f00;
width: 200px;
animation: hogeanime1 3s ease infinite alternate;
-webkit-animation: hogeanime1 3s ease infinite alternate;
-moz-animation: hogeanime1 3s ease infinite alternate;
-ms-animation: hogeanime1 3s ease infinite alternate;
}
@keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
div {
background: #f00;
width: 200px;
animation: hogeanime1 3s linear infinite alternate;
-webkit-animation: hogeanime1 3s linear infinite alternate;
-moz-animation: hogeanime1 3s linear infinite alternate;
-ms-animation: hogeanime1 3s linear infinite alternate;
}
@keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
div {
background: #f00;
width: 200px;
animation: hogeanime1 3s ease-in infinite alternate;
-webkit-animation: hogeanime1 3s ease-in infinite alternate;
-moz-animation: hogeanime1 3s ease-in infinite alternate;
-ms-animation: hogeanime1 3s ease-in infinite alternate;
}
@keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
div {
background: #f00;
width: 200px;
animation: hogeanime1 3s ease-out infinite alternate;
-webkit-animation: hogeanime1 3s ease-out infinite alternate;
-moz-animation: hogeanime1 3s ease-out infinite alternate;
-ms-animation: hogeanime1 3s ease-out infinite alternate;
}
@keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
div {
background: #f00;
width: 200px;
animation: hogeanime1 3s ease-in-out infinite alternate;
-webkit-animation: hogeanime1 3s ease-in-out infinite alternate;
-moz-animation: hogeanime1 3s ease-in-out infinite alternate;
-ms-animation: hogeanime1 3s ease-in-out infinite alternate;
}
@keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
対応ブラウザ
デスクトップ
Chrome43 以降 ○
42 △41 △40 △39 △38 △37 △36 △35 △↑ prefix『-webkit-』が必要
2 以前 ×
Firefox16 以降 ○
15 △14 △13 △12 △11 △10 △9 △8 △↑ prefix『-moz-』が必要
4 以前 ×
Safari9 以降 ○8 △
7 △6 △5 △4 △↑ prefix『-webkit-』が必要
3 以前 ×
Edge12 以降 ○
IE11 ○10 ○9 ×
8 ×7 ×
6 ×
Opera30 以降 ○29 △28 △27 △26 △25 △24 △23 △22 △↑ prefix『-webkit-』が必要
29 △28 △27 △26 △25 △24 △23 △22 △↑ prefix『-o-』が必要
11 以前 ×モバイル
iOS Safari9 以降 ○8 △7 △6 △5 △4 △↑ prefix『-webkit-』が必要
2 以前 ×
Android Browser43 以降 ○4.4 △↑ prefix『-webkit-』が必要
3 以前 × Chrome Android最新版 ○デスクトップ版と同等の対応です
Firefox Android最新版 ○デスクトップ版と同等の対応です
『animation』プロパティを使用する際は『animation』の記述とは別に『@keyframes』も指定しなくてはなりませんのでご注意下さい。
『@keyframes』の記述方法は『@keyframes』という記述の後に任意の『アニメーション名』を書き、その後に『{}』で囲い、その中で進行状態に合わせたプロパティの変化を『0%』から『100%』の間で記述します。進行状態は『0%』が開始時、『100%』が終了時です。『0%』は『from』、『100%』は『to』という単語で記述することもできますが、『%』で指定するのが一般的です。
/* 以下のように『{}』で囲い、その中で変化のタイミングと状態を指定します。 */
@keyframes hogeanime1 {
0% { width: 200px;}
50% { width: 300px;}
100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
0% { width: 200px;}
50% { width: 300px;}
100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
0% { width: 200px;}
50% { width: 300px;}
100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
0% { width: 200px;}
50% { width: 300px;}
100% { width: 400px;}
}
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
シェアする