یک صفحه HTML/CSS بسازید که شامل یک مربع باشد که با استفاده از @keyframes و property animation-duration برای 2s به آرامی از شفافیت 0 و اندازه کوچک به شفافیت 1 و اندازه کامل انیمیت شود.

برای حل: در CSS یک @keyframes تعریف کنید که از transform: scale(0.5) و opacity: 0 به transform: scale(1) و opacity: 1 برود، سپس روی عنصر مورد نظر animation-name و animation-duration: 2s را اعمال کنید؛ برای حفظ وضعیت نهایی از animation-fill-mode: forwards استفاده کنید. نکته‌ها: می‌توانید timing-function مثل ease را اضافه کنید، و برای انیمیشن‌های هنگام هاور به جای @keyframes از transition و transition-duration استفاده کنید.