انیمیشن در css

انیمیشن در css یکی از ویژگی‌های جذاب طراحی وب است که به طراحان این امکان را می‌دهد تا بدون استفاده از JavaScript حرکت و پویایی را به عناصر صفحه اضافه کنند. این ویژگی باعث می‌شود وب‌ سایت‌ها زنده‌ تر، حرفه‌ای‌ تر و تعاملی‌ تر به نظر برسند. با استفاده از انیمیشن‌ ها می‌توان افکت‌ پهایی مانند محو شدن، حرکت کردن، بزرگ یا کوچک شدن، تغییر رنگ و بسیاری حرکات دیگر را پیاده‌سازی کرد.

در CSS، انیمیشن‌ها به دو روش اصلی تعریف می‌شوند: استفاده از ویژگی transition و استفاده از @keyframes. ویژگی transition برای اعمال تغییرات نرم بین دو حالت مختلف استفاده می‌شود، مثلاً وقتی کاربر روی یک دکمه هاور می‌کند و رنگ آن به آرامی تغییر می‌کند.

button {
background-color: blue;
transition: background-color 0.5s ease;
}

button:hover {
background-color: green;
}

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

@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(200px); }
}

.box {
animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}

در این مثال، عنصر دارای کلاس .box به صورت مداوم در محور X حرکت می‌کند. می‌توان ویژگی‌های دیگری مانند delay (تأخیر در شروع)، direction (جهت اجرا)، و fill-mode (نحوه اعمال حالت نهایی انیمیشن) را نیز کنترل کرد.

انیمیشن‌های CSS بسیار سبک‌تر از انیمیشن‌های JavaScript هستند و عملکرد بهتری در مرورگرهای مدرن دارند، به‌خصوص در نسخه‌های موبایلی.

استفاده هوشمندانه از انیمیشن در طراحی، می‌تواند تجربه کاربری را بهبود بخشد، توجه کاربر را جلب کند و حس تعامل واقعی با رابط کاربری را القا کند. البته باید دقت کرد که زیاده‌روی در استفاده از انیمیشن‌ها ممکن است باعث کندی سایت یا آزار کاربر شود.