برنامه نویسی

شروع کار با انیمیشن های CSS: راهنمای مبتدیان 🎨✨

ek3nk4r 2025-01-13

0 4 خواندن این مطلب 6 دقیقه زمان میبرد

شروع کار با انیمیشن های CSS: راهنمای مبتدیان 🎨✨

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

فهرست مطالب

مقدمه 📌

آیا تا به حال از یک وب سایت بازدید کرده اید و متوجه شده اید که چگونه به نظر می رسد عناصر به طور یکپارچه حرکت می کنند، خواه دکمه ای باشد که به داخل نمایش می رود یا یک اعلان محو می شود؟ این اثرات لذت بخش اغلب نتیجه انیمیشن های CSS.

انیمیشن های CSS به توسعه دهندگان این امکان را می دهد تا بدون نیاز به جاوا اسکریپت، حرکت و تعامل را به وب سایت های خود اضافه کنند. چه بر روی افکت‌های شناور کوچک کار کنید یا صفحات فرود جذاب ایجاد کنید، انیمیشن‌های CSS وب‌سایت شما را پویاتر و جذاب‌تر می‌کنند.

نمونه انیمیشن CSS

انیمیشن های CSS چیست؟ 🤔

انیمیشن‌های CSS به عناصر اجازه می‌دهند تا بین حالت‌های مختلف در مدت زمان مشخصی جابجا شوند. آن را به عنوان داستان سرایی برای عناصر خود در نظر بگیرید: شما یک نقطه شروع، یک نقطه پایان، و به صورت اختیاری، مراحل بین آن را تعریف می کنید.

ویژگی های کلیدی انیمیشن های CSS:

نحو اعلانی: انیمیشن های خود را مستقیماً در فایل CSS خود تعریف کنید.
سهولت استفاده: نیازی به جاوا اسکریپت یا کتابخانه های خارجی نیست.
پشتیبانی مرورگر: توسط تمام مرورگرهای اصلی پشتیبانی می شود، به استثنای برخی از ویژگی های پیشرفته.
عملکرد: شتاب سخت افزاری برای انیمیشن های روان تر در مقایسه با جاوا اسکریپت در بسیاری از موارد.

انیمیشن های CSS را می توان با استفاده از دو جزء اصلی اعمال کرد:

@keyframes: طرح انیمیشنی که تغییرات در سبک یک عنصر را تعریف می کند.
ویژگی های انیمیشن: قوانینی که رفتار انیمیشن را کنترل می کنند، مانند مدت زمان، عملکرد زمان، و تعداد تکرار.

خواص کلیدی که باید بدانید 📋

قبل از پرش به مثال‌ها، بیایید مهم‌ترین ویژگی‌های CSS را برای انیمیشن‌ها بررسی کنیم:

1. `@keyframes` 🎥

را @keyframes قانون سبک های انیمیشن را در مقاطع خاصی از زمان تعریف می کند. این امتیازها به صورت درصد (0%، 50%، 100%و غیره) یا به عنوان کلمات کلیدی کوتاه (from، to).

@keyframes fadeIn {
  from {
    opacity: 0; /* The element is invisible initially */
  }
  to {
    opacity: 1; /* The element becomes fully visible */
  }
}

2. کوتاه نویسی انیمیشن ⏩

را animation ویژگی مختصر برای اعمال تمام تنظیمات انیمیشن بر روی یک عنصر است. می تواند شامل خواص زیر باشد:

animation-name: نام @keyframes انیمیشن
animation-duration: مدت زمان ماندگاری انیمیشن را مشخص می کند.
animation-timing-function: سرعت انیمیشن را مشخص می کند (به عنوان مثال، ease، linear).
animation-iteration-count: تعیین می کند که انیمیشن چند بار تکرار شود.

مثال:

.element {
  animation: fadeIn 2s ease-in-out 1;
}

3. سایر ویژگی های انیمیشن:

اموال	توضیحات
`animation-delay`	شروع انیمیشن را به تاخیر می اندازد.
`animation-fill-mode`	جلوه انیمیشن را قبل/بعد از اجرا تعیین می کند (مثلا `forwards`).
`animation-direction`	مشخص می کند که آیا انیمیشن باید در چرخه های متناوب معکوس شود یا خیر.

کتابخانه های محبوب انیمیشن CSS 📚

اگر به دنبال سرعت بخشیدن به گردش کار خود یا دسترسی به انیمیشن های پیچیده تر بدون شروع از ابتدا هستید، کتابخانه های انیمیشن CSS یک تغییر دهنده بازی هستند. این کتابخانه ها انیمیشن های از پیش ساخته شده ای را ارائه می دهند که به راحتی می توانید آنها را در پروژه خود ادغام کنید. در زیر تعدادی از محبوب ترین کتابخانه های انیمیشن CSS آورده شده است:

نام	توضیحات	ویژگی ها
Animate.css	یک کتابخانه ساده برای اعمال انیمیشن های از پیش تعریف شده روی عناصر با حداقل تنظیمات.	– انیمیشن های از پیش تعریف شده (به عنوان مثال، پرش، محو شدن، زوم) – سبک و قابل تنظیم – ادغام آسان از طریق CDN
GSAP	یک پلت فرم انیمیشن قوی مبتنی بر جاوا اسکریپت برای انیمیشن های پیشرفته و مبتنی بر تایم لاین.	– بسیار انعطاف پذیر و قابل تنظیم – یکپارچه با هر دو CSS و جاوا اسکریپت کار می کند – کنترل های جدول زمانی را برای زنجیره سازی انیمیشن ها ارائه می دهد
Hover.css	کتابخانه ای متخصص در افکت های شناور دکمه ها، تصاویر و سایر عناصر رابط کاربری.	– بر روی انیمیشن های شناور متمرکز شده است – سبک و شهودی – عالی برای بهبود UI/UX
Magic.css	مجموعه ای از انیمیشن های منحصر به فرد با پیچ و تاب عجیب و سرگرم کننده.	– انیمیشن های خلاقانه (به عنوان مثال، puffIn، ناپدید شدن) – مانند Animate.css کار می کند – کاربرد آسان
AOS (متحرک سازی در اسکرول)	کتابخانه ای برای ایجاد انیمیشن های اسکرول.	– متحرک سازی عناصر به عنوان آنها را به مشاهده – بسیار قابل تنظیم (به عنوان مثال، افست، مدت زمان) – سبک و پاسخگو

چرا از کتابخانه های انیمیشن استفاده کنیم؟

استفاده از کتابخانه با ارائه انیمیشن های از پیش ساخته شده در زمان و تلاش صرفه جویی می کند، بنابراین نیازی به ایجاد همه چیز از ابتدا ندارید. آنها به ویژه برای موارد زیر مفید هستند:

نمونه سازی سریع
انیمیشن های ثابت در یک پروژه
جلوه‌های پیشرفته‌ای که در غیر این صورت نیاز به تلاش قابل توجهی برای ساخت دستی دارند.

Project Spotlight: پس‌زمینه گرادیان و نمودار میله‌ای متحرک 🌟

برای نشان دادن پتانسیل خلاقانه انیمیشن های CSS، در اینجا دو نمونه از پروژه اخیر من آورده شده است. دیجی-کرای. این مثال‌ها نشان می‌دهند که چگونه CSS می‌تواند طرح‌های جذاب بصری ایجاد کند که جلا و حرفه‌ای بودن را به پروژه‌های شما اضافه کند.

1. پس زمینه متحرک گرادیان 🌈

یک پس‌زمینه گرادیان که به‌طور یکپارچه جابه‌جا می‌شود، زیبایی‌شناسی زنده و پویا را برای هر صفحه وب ایجاد می‌کند. در اینجا نحوه ساخت من آمده است:

<br />

چگونه کار می کند:

background-image: رنگ های گرادیان را تعریف می کند (#ff8a00 به #e52e71).
background-size: شیب را بزرگ می کند تا حرکت صاف را امکان پذیر کند.
@keyframes gradient: موقعیت پس زمینه را از بالا به پایین و عقب متحرک می کند.
حلقه بی نهایت: را infinite ارزش برای animation تضمین می کند که گرادیان به حرکت خود ادامه می دهد.

2. نمودار میله ای متحرک 📊

تجسم داده ها با انیمیشن های CSS یک راه عالی برای ایجاد نمودارهای تعاملی و بصری جذاب است. در اینجا نحوه پیاده سازی نمودار میله ای متحرک در آن آمده است دیجی-کرای:

<br />

چگونه کار می کند:

ارتفاعات دینامیک: را --val ویژگی سفارشی ارتفاع هر نوار را کنترل می کند (به عنوان مثال، --val: 80 یعنی 80 درصد قد).
رنگ های پویا: را --clr ویژگی سفارشی یک رنگ منحصر به فرد به هر نوار اختصاص می دهد.
انیمیشن: را @keyframes item-height به آرامی رشد هر نوار را از 0 تا ارتفاع محاسبه شده آن متحرک می کند.
طرح بندی شبکه ای: نوارها با استفاده از CSS Grid به صورت افقی نمایش داده می شوند.

چرا این مثال ها اهمیت دارند 🧩

این دو مثال تطبیق پذیری انیمیشن های CSS را نشان می دهد:

پس زمینه گرادیان: نشان می دهد که چگونه انیمیشن های CSS می توانند جذابیت بصری یک صفحه را افزایش دهند.
نمودار میله ای: استفاده عملی از انیمیشن های CSS برای تجسم داده ها را برجسته می کند.

هر دو مثال برای پیاده سازی آسان، سازگار با عملکرد هستند و می توانند برای هر پروژه ای سفارشی شوند.

بهترین روش ها برای انیمیشن های CSS 🛠️

آن را ساده نگه دارید: از انیمیشن های بیش از حد پیچیده خودداری کنید، زیرا می توانند حواس پرتی را ایجاد کنند.
تست در میان دستگاه ها: اطمینان حاصل کنید که انیمیشن ها در دستگاه های تلفن همراه به خوبی کار می کنند.
بازگشت به عقب: برای مرورگرهایی که از انیمیشن پشتیبانی نمی‌کنند، یک بازگشت ثابت ارائه کنید.
استفاده کنید will-change: با اشاره به تغییرات آتی عملکرد را بهینه کنید:
```
.animated-btn {
  will-change: transform, background-color;
}
```

اشکال زدایی انیمیشن های CSS 🔍

1. از مرورگر DevTools استفاده کنید

مرورگرهای مدرن به شما امکان می دهند انیمیشن ها را بررسی و اشکال زدایی کنید:

Chrome DevTools: برای مشاهده انیمیشن ها در زمان واقعی، تب DevTools → “Animations” را باز کنید.
فایرفاکس: از ابزار “Inspector” برای اشکال زدایی ویژگی های انیمیشن استفاده کنید.

2. لاگ های کنسول با جاوا اسکریپت

ردیابی انیمیشن ها با استفاده از شنوندگان رویداد:

const btn = document.querySelector('.animated-btn');
btn.addEventListener('animationend', () => {
  console.log('Animation completed!');
});

انیمیشن های CSS در مقابل انیمیشن های جاوا اسکریپت 🤔

ویژگی	انیمیشن های CSS	انیمیشن های جاوا اسکریپت
سهولت استفاده	نحو ساده	نیاز به دانش کدنویسی دارد
عملکرد	شتاب سخت افزاری	بستگی به اجرا داره
انعطاف پذیری	محدود (نمی توان مکث / معکوس کرد)	بسیار انعطاف پذیر و تعاملی

نتیجه گیری 🚀

انیمیشن های CSS، همراه با کتابخانه هایی مانند Animate.css و GSAP، دنیایی از امکانات خلاقانه را برای توسعه دهندگان وب باز می کند. با تسلط بر اصول اولیه شروع کنید، با کتابخانه ها آزمایش کنید و به زودی وب سایت هایی از نظر بصری خیره کننده و تعاملی خواهید ساخت.

با استفاده از این ابزارها و نکات، شما آماده هستید تا پروژه های وب خود را زنده کنید. بیایید به انیمیشن سازی ادامه دهیم! 🎉