เพื่อตั้งค่าโค้งความเร็ว (speed curve) ของ transition ให้ใช้คุณสมบัติ transition-timing-function
ตัวอย่างโค้ด
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 4s;
}
#effect1 { transition-timing-function: linear; }
#effect2 { transition-timing-function: ease-in; }
#effect3 { transition-timing-function: ease-out; }
div:hover { width: 250px; }
</style>
</head>
<body>
<h1>Transition Effect</h1>
<p>Hover ที่ div แต่ละอันเพื่อดู transition effect และความเร็ว:</p>
<div id="effect1">linear effect</div><br>
<div id="effect2">ease-in effect</div><br>
<div id="effect3">ease-out effect</div><br>
</body>
</html>
ค่าของ timing-function:
linear- ความเร็วคงที่ตลอดease(ค่าเริ่มต้น) - เริ่มช้า เร็วกลาง จบช้าease-in- เริ่มช้า แล้วเร็วขึ้นease-out- เริ่มเร็ว แล้วช้าลงease-in-out- เริ่มช้า เร็วกลาง จบช้า (เหมือน ease แต่เน้นช้าทั้งสองข้าง)cubic-bezier(n,n,n,n)- กำหนดโค้งเอง
