یک دکمه بسازید که وقتی ماوس روی آن می‌رود رنگ پس‌زمینه و اندازه‌اش به‌صورت نرم در مدت 0.8s تغییر کند.

برای این کار از transition روی background-color و transform استفاده کنید و در :hover مقدار background-color تغییر کند و اندازه با transform: scale(1.1) به آرامی افزایش یابد تا در 0.8s انجام شود. بهینه‌تر است از transform به جای تغییر width/height استفاده کنید تا رندر بهتری داشته باشید. اگر نیاز به انیمیشن پیچیده‌تر دارید، می‌توانید از @keyframes و animation-duration بهره ببرید، اما در این حالت ساده transition کافی است. همچنین زمان را با s یا ms مشخص کنید و به دسترسی با prefers-reduced-motion توجه کنید.