Chạy Thử

<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css transition-timing-function</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#timingease{width:40px;height:40px;background:red;clear: both;margin-right:20px;transition:3s; -moz-transition:3s; -ms-transition:3s; -o-transition:3s; -webkit-transition:3s;transition-timing-function: ease}
#timingease:hover{width:200px}
#timinglinear{width:40px;height:40px;background:red;clear: both;margin-right:20px;transition:3s; -moz-transition:3s; -ms-transition:3s; -o-transition:3s; -webkit-transition:3s;transition-timing-function: linear}
#timinglinear:hover{width:200px}
#timingease-in{width:40px;height:40px;background:red;clear: both;margin-right:20px;transition:3s; -moz-transition:3s; -ms-transition:3s; -o-transition:3s; -webkit-transition:3s;transition-timing-function: ease-in}
#timingease-in:hover{width:200px}
#timingease-out{width:40px;height:40px;background:red;clear: both;margin-right:20px;transition:3s; -moz-transition:3s; -ms-transition:3s; -o-transition:3s; -webkit-transition:3s;transition-timing-function: ease-out}
#timingease-out:hover{width:200px}
#timingease-in-out{width:40px;height:40px;background:red;clear: both;margin-right:20px;transition:3s; -moz-transition:3s; -ms-transition:3s; -o-transition:3s; -webkit-transition:3s;transition-timing-function: ease-in-out}
#timingease-in-out:hover{width:200px}

</style>
</head>
<body>
<h1>Chạy thử Css transition-timing-function</h1>
<h2>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).</h2>
<div id="timingease">ease</div><br>
<h2>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.</h2>
<div id="timinglinear">linear</div><br>
<h2>Tạo hiệu ứng chuyển đổi chậm ở lúc bắt đầu.</h2>
<div id="timingease-in">ease-in</div><br>
<h2>Tạo hiệu ứng chuyển đổi chậm ở lúc kết thúc.</h2>
<div id="timingease-out">ease-out</div><br>
<h2>Tạo hiệu ứng chuyển đổi chậm ở lúc bắt đầu và lúc kết thúc.</h2>
<div id="timingease-in-out">ease-in-out</div><br>

</body>
</html>