CSS transition-timing-function

transition-timing-function₃

kiểu tốc độ hiệu ứng của 1 quá trình chuyển động

giá trị	Ví dụ	Mô tả
ease	transition-timing-function: ease;	Xác định một hiệu ứng của quá trình chuyển đổi với một sự khởi đầu chậm, sau đó nhanh chóng, sau đó kết thúc chậm.
ease-in	transition-timing-function: ease-in;	Xác định một hiệu ứng của quá trình chuyển đổi với một khởi đầu chậm chạp.
ease-out	transition-timing-function: ease-out;	Xác định một hiệu ứng của quá trình chuyển đổi với một kết thúc chậm.
ease-in-out	transition-timing-function: ease-in-out;	Xác định một hiệu ứng của quá trình chuyển đổi với một khởi đầu và kết thúc chậm.
linear	transition-timing-function: linear;	Xác định một hiệu ứng của quá trình chuyển đổi với cùng một tốc độ từ đầu đến cuối.
cubic-bezier(n,n,n,n)	transition-timing-function: cubic-bezier(0,1,0.35,0);	Xác định giá trị cho hiệu ứng của quá trình chuyển đổi theo từng giai đoạn, giá trị xác định chỉ có thể từ 0 tới 1.

Xem ví dụ

<style>
.ttt
{
width:150px;
height:50px;
background:#C5E099;
color: #6092DC;
margin: auto;
font-weight:bold;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

.ttt:hover{width:400px;}

#ttt01 {transition-timing-function: linear;}
#ttt02 {transition-timing-function: ease;}
#ttt03 {transition-timing-function: ease-in;}
#ttt04 {transition-timing-function: ease-out;}
#ttt05 {transition-timing-function: ease-in-out;}

/* Firefox 4: */
#ttt01 {-moz-transition-timing-function: linear;}
#ttt02 {-moz-transition-timing-function: ease;}
#ttt03 {-moz-transition-timing-function: ease-in;}
#ttt04 {-moz-transition-timing-function: ease-out;}
#ttt05 {-moz-transition-timing-function: ease-in-out;}

/* Safari and Chrome: */
#ttt01 {-webkit-transition-timing-function: linear;}
#ttt02 {-webkit-transition-timing-function: ease;}
#ttt03 {-webkit-transition-timing-function: ease-in;}
#ttt04 {-webkit-transition-timing-function: ease-out;}
#ttt05 {-webkit-transition-timing-function: ease-in-out;}

/* Opera: */
#ttt01 {-o-transition-timing-function: linear;}
#ttt02 {-o-transition-timing-function: ease;}
#ttt03 {-o-transition-timing-function: ease-in;}
#ttt04 {-o-transition-timing-function: ease-out;}
#ttt05 {-o-transition-timing-function: ease-in-out;}

/*------------------------------------------------------------*/

#ttt11 {transition-timing-function: cubic-bezier(0,0,0.25,1);}
#ttt12 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#ttt13 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#ttt14 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#ttt15 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

/* Firefox 4: */
#ttt11 {-moz-transition-timing-function: cubic-bezier(0,0,0.25,1);}
#ttt12 {-moz-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#ttt13 {-moz-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#ttt14 {-moz-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#ttt15 {-moz-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

/* Safari and Chrome: */
#ttt11 {-webkit-transition-timing-function: cubic-bezier(0,0,0.25,1);}
#ttt12 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#ttt13 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#ttt14 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#ttt15 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

/* Opera: */
#ttt11 {-o-transition-timing-function: cubic-bezier(0,0,0.25,1);}
#ttt12 {-o-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#ttt13 {-o-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#ttt14 {-o-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#ttt15 {-o-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

</style>

<div id="ttt01" class="ttt"> ttt01 linear </div>
<div id="ttt02" class="ttt"> ttt02 ease </div>
<div id="ttt03" class="ttt"> ttt03 ease-in </div>
<div id="ttt04" class="ttt"> ttt04 ease-out </div>
<div id="ttt05" class="ttt"> ttt05 ease-in-out </div>

<br/>

<div id="ttt11" class="ttt"> ttt11 linear (number) </div>
<div id="ttt12" class="ttt"> ttt12 ease (number) </div>
<div id="ttt13" class="ttt"> ttt13 ease-in (number) </div>
<div id="ttt14" class="ttt"> ttt14 ease-out (number) </div>
<div id="ttt15" class="ttt"> ttt15 ease-in-out (number) </div>