CSS3 transition-timing-function プロパティ
 完全な CSS3 リファレンス
例
A transition effect with the same speed from start to end:
transition-timing-function: linear;
-moz-transition-timing-function: linear; /* Firefox 4 */
-webkit-transition-timing-function: linear; /* Safari and Chrome */
-o-transition-timing-function: linear; /* Opera */ |
Try it yourself »
|
ブラウザ・サポート
transition-timing-function property is not supported in any browsers.
Firefox 4 supports an alternative, the -moz-transition-timing-function property.
Safari and Chrome support an alternative, the -webkit-transition-timing-function property.
Opera support an alternative, the -o-transition-timing-function property.
定義と用法
transition-timing-function property specifies the speed curve of the transition
effect.
This property allows a transition effect to change speed over its duration.
| デフォルト値: |
ease |
| 継承: |
no |
| バージョン: |
CSS3 |
| JavaScript構文: |
object.style.transitionTimingFunction="linear" |
構文
| transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n); |
| 値 |
説明 |
| linear |
Specifies a transition effect with the same speed from start to end
(equivalent to cubic-bezier(0,0,1,1)) |
| ease |
Specifies a transition effect with a slow start, then fast, then end
slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1)) |
| ease-in |
Specifies a transition effect with a slow start (equivalent to
cubic-bezier(0.42,0,1,1)) |
| ease-out |
Specifies a transition effect with a slow end (equivalent to
cubic-bezier(0,0,0.58,1)) |
| ease-in-out |
Specifies a transition effect with a slow start and end (equivalent to
cubic-bezier(0.42,0,0.58,1)) |
| cubic-bezier(n,n,n,n) |
Define your own values in the cubic-bezier function.
Possible values are numeric values from 0 to 1 |
チップ: Try the different values in the examples below to understand how
it works!
 |
Try it Yourself |
例
To better understand the different function values:
Here are five different div elements with five different values:
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
/* Firefox 4: */
#div1 {-moz-transition-timing-function: linear;}
#div2 {-moz-transition-timing-function: ease;}
#div3 {-moz-transition-timing-function: ease-in;}
#div4 {-moz-transition-timing-function: ease-out;}
#div5 {-moz-transition-timing-function: ease-in-out;}
/* Safari and Chrome: */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
/* Opera: */
#div1 {-o-transition-timing-function: linear;}
#div2 {-o-transition-timing-function: ease;}
#div3 {-o-transition-timing-function: ease-in;}
#div4 {-o-transition-timing-function: ease-out;}
#div5 {-o-transition-timing-function: ease-in-out;} |
Try it yourself »
|
例
Same as the example above, but the speed curves are specified with the
cubic-bezier function:
#div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Firefox 4: */
#div1 {-moz-transition-timing-function: cubic-bezier(0,0,0.25,1);}
#div2 {-moz-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari and Chrome: */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Opera: */
#div1 {-o-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-o-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-o-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-o-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-o-transition-timing-function: cubic-bezier(0.42,0,0.58,1);} |
Try it yourself »
|
完全な CSS3 リファレンス
|