با استفاده از CSS و @keyframes یک مربع بسازید که به‌صورت پیوسته بین چپ و راست حرکت کند، هم‌زمان رنگ پس‌زمینه و مقیاسش تغییر کند و انیمیشن بی‌نهایت تکرار شود.

برای حل، یک عنصر div با اندازه مشخص ایجاد کنید و از @keyframes برای تعریف مراحل انیمیشن (مثلاً 0%/50%/100% یا from/to) استفاده کنید؛ در داخل keyframes از transform: translateX(...) و scale(...) برای حرکت و تغییر مقیاس و از background-color برای تغییر رنگ بهره ببرید. سپس با خصوصیات animation-name، animation-duration، animation-timing-function و animation-iteration-count: infinite انیمیشن را به عنصر اعمال کنید. نکته: برای عملکرد بهتر از transform به جای تغییر موقعیت با left/top استفاده کنید و در صورت نیاز از animation-fill-mode یا animation-direction جهت کنترل رفتار انیمیشن بهره ببرید.