راهنمای جامع انیمیشن CSS


انیمیشن در وب سایت ها و برنامه های وب پویا، نقش بسیار مهمی در جلب توجه و بهبود تجربه کاربری دارند. این انیمیشن ها با زبان نشانه گذاری CSS ساخته شده اند که در قسمت های مختلف وب سایت مانند دکمه ها و لینک ها، منو، صفحات اصلی، ارائه محصول و خدمات، نمایش داده ها، آمار و بسیاری از قسمت های دیگر استفاده می شود.

این مقاله به معرفی انیمیشن در CSS و مراحل ساخت آن پرداخته است.

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

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

به عنوان مثال، فرض کنید یک دکمه داریم و می خواهیم زمانی که کاربر ماوس را روی آن می برد، دکمه به آرامی ظاهر شود. با استفاده از انیمیشن CSS می توانیم این حرکت را ایجاد کنیم و ظاهری زنده و جذاب به دکمه بدهیم که توجه کاربران را به خود جلب کند.

برای کسب اطلاعات بیشتر در مورد انیمیشن در CSS، ابتدا باید دو مفهوم را درک کنیم ضربات کلیدی و خواص با CSS آشنا شوید.


بیشتر بخوانید: “راهنمای جامع CSS و نقش آن در طراحی وب سایت


کی فریم چیست؟

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

خواص در CSS چیست؟

ویژگی های CSS به توسعه دهنده اجازه می دهد تا ویژگی های مختلف عناصر وب سایت را در طول زمان تغییر دهد. این تغییرات شامل تبدیل (تغییر شکل و موقعیت)، شفافیت (شفافیت) و رنگ (رنگ) است، اما تمام خصوصیات دیگری که در CSS قابل تغییر هستند را نیز می توان اعمال کرد.
به عنوان مثال، با تبدیل، می توانید یک عنصر را به بالا، پایین، راست یا چپ حرکت دهید یا حتی آن را بچرخانید و اندازه آن را تغییر دهید. همچنین، با تغییر شفافیت، می توانید شفافیت یک عنصر را از حالت مرئی به نامرئی (یا برعکس) تنظیم کنید. و با تغییر رنگ می توانید رنگ یک عنصر را تغییر دهید.

آموزش طراحی انیمیشن در CSS

مرحله 1: نکات کلیدی انیمیشن را تعریف کنید

همانطور که گفته شد، هر انیمیشن CSS دارای مجموعه ای از فریم های کلیدی است. نکات کلیدی زمان های مهم در انیمیشن هستند که با استفاده از درصد مشخص شده اند. این درصدها نشان می دهد که چه تغییراتی در هر نقطه از انیمیشن رخ می دهد. به عنوان مثال شروع انیمیشن (0%) و پایان انیمیشن (100%).

مرحله دوم: نام انیمیشن و ویژگی های مدت زمان انیمیشن را تعریف کنید

ویژگی های انیمیشن نقاط کلیدی را به یک عنصر خاص اختصاص می دهند و نحوه حرکت آن را تعیین می کنند. این دو ویژگی برای پیاده سازی هر نوع انیمیشن در CSS مورد نیاز است.

نام انیمیشن

ویژگی animation-name نام نقطه کلیدی را مشخص می کند. هنگام نامگذاری انیمیشن خود، می توانید از حروف a تا z، اعداد 0 تا 9 و نمادهای “-” و “_” استفاده کنید.

اگر چندین نقطه کلیدی وجود داشته باشد که انیمیشن یک عنصر را توصیف می کند، باید چندین مقدار برای ویژگی animationname تعریف شود. برای این کار می توانید نام فریم های کلیدی را با فاصله و کاما از هم جدا کنید.

انیمیشن-مدت

ویژگی animation-duration مدت زمان انیمیشن را مشخص می کند. اگرچه انیمیشن می تواند به شکل یک حلقه باشد که به طور منظم تکرار می شود، تعداد ثانیه ها یا میلی ثانیه ها باید در ویژگی animation-duration مشخص شود. این ویژگی را می توان به صورت صفر یا هر مقدار مثبت تعریف کرد. مقادیر منفی مجاز نیستند.

مرحله سوم: تعریف سایر ویژگی های ضروری انیمیشن

علاوه بر ویژگی های ذکر شده در بخش قبل، برخی ویژگی های اساسی دیگر نیز وجود دارد که هنگام طراحی انیمیشن در CSS مهم هستند:

1. زمان انیمیشن

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

  • خطی: سرعت ثابت
  • سهولت ورود: پرتاب صاف
  • مماشات: پایان آرام
  • خروج آسان: شروع و پایان صاف
2. سرعت انیمیشن را کم کنید

با این ویژگی می توانید مشخص کنید که انیمیشن چه زمانی شروع می شود. به عنوان مثال، اگر می خواهید انیمیشن 2 ثانیه پس از بارگذاری صفحه شروع شود، می توانید از این ویژگی استفاده کنید.

3. تعداد تکرارهای انیمیشن

این ویژگی مشخص می کند که انیمیشن چند بار پخش شود. به عنوان مثال، می توانید یک انیمیشن را طوری تنظیم کنید که فقط یک بار پخش شود یا به طور مداوم تکرار شود.

4. کارگردانی انیمیشن

این ویژگی جهت حرکت انیمیشن را مشخص می کند.

5. حالت پر کردن انیمیشن

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

  • طبیعی: در این مورد، ویژگی های CSS تنها زمانی اعمال می شود که انیمیشن پخش شود.
  • مهاجمان: در این حالت، مقادیر خصوصیات CSS تا زمان اجرای انیمیشن باقی می مانند و پس از پایان انیمیشن، مقادیر آخرین فریم کلیدی (آخرین مرحله انیمیشن) در عنصر ذخیره می شود.
  • برعکس: در این حالت، عنصر قبل از شروع انیمیشن، مقادیر ویژگی CSS را از فریم کلیدی اولیه (مرحله اول انیمیشن) دریافت و اعمال می کند.
  • هر دو: در این مورد، مقادیر ویژگی CSS هم قبل از شروع انیمیشن و هم بعد از پایان آن اعمال می شود.
6. (وضعیت پخش انیمیشن)

این عملکرد به شما امکان می دهد انیمیشن را متوقف یا از سر بگیرید. به عنوان مثال، اگر می خواهید یک انیمیشن را متوقف کنید، می توانید از حالت “مکث” استفاده کنید.

انواع انیمیشن در CSS

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

محو شدن 1.:

با این نوع انیمیشن، عنصر به آرامی ظاهر می شود. برای این کار شخصیت کدورت برای تنظیم شفافیت عنصر استفاده می شود. مثلا:

fade-in {
  opacity: 0;
  animation: fadeIn 2s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
انقراض 2.:

در این نوع انیمیشن عنصر به آرامی ناپدید می شود. برای این کار، ارزش مشخصه کدورت از مقدار اولیه به صفر تغییر می کند.

اسلاید به داخل/خارج 3.:

با استفاده از امکانات تبدیل و من ترجمه میکنم، می توانید موارد را به چپ، راست، بالا یا پایین بکشید. مثلا:

slide-in {
  transform: translateX(-100%);
  animation: slideIn 1s forwards;
}

@keyframes slideIn {
  to {
    transform: translateX(0);
  }
}
نوبت .4:

با شخصیت تبدیل و زاویه چرخش، می توانید عناصر را حول محور آنها بچرخانید. مثلا:

rotate {
  transform: rotate(45deg);
  animation: spin 2s infinite linear;
}

@keyframes spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
مقیاس 5. (بزرگنمایی/کوچکنمایی):

با شخصیت تبدیل و مقیاس، می توانید عناصر را بزرگتر یا کوچکتر کنید. مثلا:

scale-up {
  transform: scale(1.5);
  animation: pulse 1s alternate infinite;
}

@keyframes pulse {
  to {
    transform: scale(1);
  }
}
پرش 0.6:

این نوع انیمیشن باعث می شود عناصر به طور مکرر و با سرعت کمتری بپرند. می توانید از فریم های کلیدی برای تعریف مراحل پرش استفاده کنید. مثلا:

bounce {
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
نبض .7:

این نوع انیمیشن باعث می شود عناصر به طور متناوب رشد و کوچک شوند. می توانید از فریم های کلیدی برای تعریف مراحل پالس استفاده کنید. مثلا:

pulse {
  animation: pulse 1s alternate infinite;
}

@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.2);
  }
}
لرزش 0.8:

با کمک کی فریم ها می توانید در المان های مورد نظر لرزش ایجاد کنید. مثلا:

shake {
  animation: shake 0.5s infinite;
}
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

ابزارهایی برای ایجاد انیمیشن در CSS

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

  • آنیمیست
  • تولید کننده انیمیشن CSS
  • اپلیکیشن Keyframes


بیشتر بخوانید: “راهنمای عملی طراحی سایت زیبا (قسمت اول)


نتیجه

انیمیشن CSS به طراحان وب سایت و اپلیکیشن های وب کمک می کند تا با طراحی یک محصول دیجیتال پویا و پویا، جان تازه ای به وب سایت بدهند و تجربه کاربری دلپذیری را ایجاد کنند.

طراحی وب سایت پویا از دیرباز یکی از گرایش های طراحی وب سایت در سال های اخیر بوده است.


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


The post راهنمای جامع انیمیشن CSS appeared first on آکادمی آمانج.