یک دکمه بسازید که هنگام هاور همزمان رنگ پس‌زمینه و اندازه‌اش تغییر کند و برای چند نسخه از دکمه توابع زمانی مختلف transition-timing-function (مثل ease، linear، ease-in و یک cubic-bezier سفارشی) را اعمال کرده و تفاوت‌ آنها را نمایش دهید.

برای مقایسه دقیق بین انواع transition، مدت زمان (مثلاً 0.4s) را برای همه نسخه‌ها ثابت نگه دارید و فقط transition-timing-function را تغییر دهید. از transform: scale(1.05) استفاده کنید تا تغییر اندازه بدون جابه‌جایی صفحه باشد و تنها اثر easing مشخص شود. برای cubic-bezier سفارشی، نقاط کنترل را با ابزار طراحی بدست آورید و نتیجه را با چند نمونه آزمایش کنید تا overshoot یا یکنواختی مطلوب دیده شود. با استفاده از کلاس‌های متفاوت روی دکمه‌ها، تفاوت رفتار هر timing-function به وضوح قابل مقایسه خواهد بود.