CSS – انیمیشن‌ها (Animations)

CSS امکان انیمیشن المان‌های HTML را بدون نیاز به استفاده از JavaScript فراهم می‌کند! در این بخش به بررسی نحوه استفاده از CSS برای ایجاد انیمیشن می‌پردازیم.

ویژگی‌های مربوط به انیمیشن‌ها

در این فصل با ویژگی‌های زیر در CSS آشنا خواهید شد:

  • @keyframes: تعریف نقاط کلیدی برای تغییرات استایل
  • animation-name: نام انیمیشن
  • animation-duration: مدت زمان اجرای انیمیشن
  • animation-delay: تاخیر در شروع انیمیشن
  • animation-iteration-count: تعداد دفعات اجرای انیمیشن
  • animation-direction: جهت اجرای انیمیشن
  • animation-timing-function: نحوه تغییر سرعت انیمیشن
  • animation-fill-mode: مشخص کردن حالت‌های انیمیشن قبل و بعد از اجرا
  • animation: ویژگی کلی انیمیشن که به صورت خلاصه از همه ویژگی‌ها استفاده می‌کند.

پشتیبانی مرورگرها از انیمیشن‌های CSS

در جدول زیر نسخه‌های اولیه مرورگرها که از این ویژگی‌ها پشتیبانی می‌کنند، آورده شده است.

ویژگی Chrome Firefox Safari Edge Opera
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

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

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

قانون @keyframes

رای استفاده از انیمیشن CSS، ابتدا باید نقاط کلیدی را با استفاده از قانون @keyframes تعریف کنید. این نقاط کلیدی مشخص می‌کنند که در چه زمانی چه استایلی به المان اعمال شود.

مثال:

/* کد انیمیشن */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* المانی که انیمیشن به آن اعمال می‌شود */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

در این مثال، انیمیشن پس‌زمینه عنصر <div> را به مدت 4 ثانیه از رنگ قرمز به زرد تغییر می‌دهد.

تغییرات چندگانه با درصد

علاوه بر استفاده از “from” و “to”، می‌توانید از درصد استفاده کنید تا استایل‌های بیشتری را در طول انیمیشن اعمال کنید.

مثال:

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

تأخیر در شروع انیمیشن

با استفاده از ویژگی animation-delay، می‌توانید تاخیری برای شروع انیمیشن تعیین کنید.

مثال:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

مقادیر منفی

می‌توانید از مقادیر منفی نیز استفاده کنید. در این صورت، انیمیشن به گونه‌ای اجرا می‌شود که انگار از قبل شروع شده است.

مثال:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

تعیین تعداد دفعات اجرای انیمیشن

با استفاده از ویژگی animation-iteration-count، می‌توانید تعداد دفعات اجرای انیمیشن را مشخص کنید.

مثال:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

برای اجرای بی‌نهایت انیمیشن:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

تغییر جهت انیمیشن

ویژگی animation-direction جهت اجرای انیمیشن را مشخص می‌کند.

مثال برای اجرای انیمیشن در جهت معکوس:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

مثال برای اجرای انیمیشن به صورت متناوب (رفت و برگشتی):

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: alternate;
}

مشخص کردن منحنی سرعت انیمیشن

ویژگی animation-timing-function نحوه تغییر سرعت انیمیشن را تعیین می‌کند. مقادیر مختلف شامل ease، linear، ease-in، ease-out و ease-in-out می‌باشند.

مثال:

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

مشخص کردن حالت‌های انیمیشن با fill-mode

ویژگی animation-fill-mode تعیین می‌کند که یک عنصر قبل یا بعد از اجرای انیمیشن چه حالتی داشته باشد.

مثال:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

استفاده از ویژگی خلاصه‌شده انیمیشن

می‌توانید تمامی ویژگی‌های انیمیشن را به صورت خلاصه در یک خط استفاده کنید.

مثال:

div {
  animation: example 5s linear 2s infinite alternate;
}

نتیجه‌گیری

ویژگی‌های انیمیشن در CSS امکان ایجاد جلوه‌های بصری جذاب و تغییرات تدریجی استایل‌ها را به راحتی فراهم می‌کنند. این ویژگی‌ها را می‌توان به صورت دلخواه تنظیم و با استفاده از @keyframes سفارشی کرد.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.