Tự code rồi chạy thử... Chạy Thử

<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính transition-timing-function trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:100%; height:auto; float:left; border:1px solid red; margin-bottom: 10px}

span{width:100%; height:auto; float:left; margin:0px; padding:15px; background:green; width:300px; color:#fff; transition-property:width; transition-duration: 3s; }
span:hover{width:100%}

div p{margin:0px; padding:0px}

</style>
</head>
<body>

<h1>Code Thuộc tính transition-timing-function trong CSS</h1>

<p>Dùng để quy định cách chạy nhanh chạy chậm của hiệu ứng transition ở các giai đoạn: đầu, giữa, cuối:</p>

<p>ease: tạo hiệu ứng chuyển đổi khi bắt đầu thì chậm sau đó nhanh dần và gần kết thúc lại chậm từ từ (giá trị mặc định).</p>
<div><span  style="transition-timing-function: ease;">transition-timing-function: ease;</span></div>

<p>linear: tạo hiệu ứng chuyển đổi từ lúc bắt đầu với lúc kết thúc tốc độ là như nhau</p>
<div><span  style="transition-timing-function: linear;">transition-timing-function: linear;</span></div>

<p>ease-in: tạo hiệu ứng chuyển đổi chậm ở lúc bắt đầu.</p>
<div><span  style="transition-timing-function: ease-in;">transition-timing-function: ease-in;</span></div>

<p>ease-out: tạo hiệu ứng chuyển đổi chậm ở lúc kết thúc.</p>
<div><span  style="transition-timing-function: ease-out;">transition-timing-function: ease-out;</span></div>

<p>ease-in-out: tạo hiệu ứng chuyển đổi chậm ở lúc bắt đầu và lúc kết thúc.</p>
<div><span  style="transition-timing-function: ease-in-out;">transition-timing-function: ease-in-out;</span></div>

</body>
</html>

Code Thuộc tính transition-timing-function trong CSS

Dùng để quy định cách chạy nhanh chạy chậm của hiệu ứng transition ở các giai đoạn: đầu, giữa, cuối:

ease: tạo hiệu ứng chuyển đổi khi bắt đầu thì chậm sau đó nhanh dần và gần kết thúc lại chậm từ từ (giá trị mặc định).

transition-timing-function: ease;

linear: tạo hiệu ứng chuyển đổi từ lúc bắt đầu với lúc kết thúc tốc độ là như nhau

transition-timing-function: linear;

ease-in: tạo hiệu ứng chuyển đổi chậm ở lúc bắt đầu.

transition-timing-function: ease-in;

ease-out: tạo hiệu ứng chuyển đổi chậm ở lúc kết thúc.

transition-timing-function: ease-out;

ease-in-out: tạo hiệu ứng chuyển đổi chậm ở lúc bắt đầu và lúc kết thúc.

transition-timing-function: ease-in-out;

Code Thuộc tính transition-timing-function trong CSS nằm trong bài viết Thuộc tính transition-timing-function trong CSS